Html,Css Frage (wiedereinmal von mir)

Martin279

Moin,MOinY!
Ich habe ein paar Fragen zu CSS und HTML !
Ich arbeite nämlcih grad an einem anderen Projekt (überarbeitung meiner Seite)
Erstmal der Code:

HTML

<html>
<head>
<title>Projekt_Aplpha</title>
<style type="text/css">
div
{
font-size:12px;font-family:Verdana;
position:absolute;width:100px;height:200px;
background-color:#EEEEDD;
}
.div1
{
border:1px solid #aaaaaa;
left:150px;top:70px;
width:700px;height:100px;
-moz-border-radius:10px;
}


.div2
{
border:1px solid #aaaaaa;
left:150px;top:170px;
width:700px;height:340px;
-moz-border-radius:10px;
}
#navcontainer ul
{
list-style-type: none;
text-align: left;
}


#navcontainer ul li a
{
background: transparent url(images/list-off.gif) left center no-repeat;
padding-left: 15px;
text-align: left;
font: normal 11px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
text-decoration: none;
color: #999;
}


#navcontainer ul li a:hover
{
background: transparent url(images/list-on.gif) left center no-repeat;
color: black;
}


#navcontainer ul li a#current
{
background: transparent url(images/list-active.gif) left center no-repeat;
color: #666;
}
</style>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<center>
<div class="div1"><center>Hier ist der Banner bereich !</center></div>
<div class="div2">
<div id="navcontainer">
<ul id="navlist">
<li id="active">[url='#']Item one[/url]
[*][url='#']Item two[/url]
[*][url='#']Item three[/url]
[*][url='#']Item four[/url]
[*][url='#']Item five[/url]
[/list]
</div>
</center>
</body>
</html>

Alles anzeigen

Und jetzt zu den Fragen :

1.Wie kann ich den Fehler beheben das die Items so abgestuft angezeigt werden?
2.Wie schaffe ich es das mein Menü (die Items) Links und rechts sind und meine Info , Text und soo in der Mitte ist !?
3.Ich möchte gerne dort wo es weiß ist - der Rand - Ein gitter Hinterdrund haben
oder ein anderes SCHLICHTES Hintergrund bild: Kann man so was mit CSS gestalten???Ich habds mal probiert ein Hintergrundbild in meine Page zu laden aber dann läuft alles schief und ich finde kein PASSENDES Bild dafür!?
4.Warum werden VOR den Items keine Punkte gesetzt obwohl das in den CSS mit drinne steht !
5.Wie kann ich Das Menü "unterteilen" also ungefähr so:

Life (nicht anklickbar)------------------------------------Service(nicht anklickbar)
Über mich (anklickbar)-----------------------------------HTML,CSS(anklickbar)
Freunde (anklickbar)--------------------------------------PHP(anklickbar)
Tiere(anklickbar)------------------------------------------Sonstiges(Nicht anklickbar)
Links(nicht anklickbar)------------------------------------........
Lusitge Links(anklickbar------------------------------------.......)
Links von Freunden(anklickbar)

Halt so in der Art !
Höffe ich wisst was ich meine !

Danke und.......ihr seid klasse *schleim *

MFG Martin

Edit: Ich habe mir überlegt ich möchte lieber den Hintergrund so lassen dafür aber an den Beiden Ecken des Banner bereiches 2 Fotos die soo quergestellt sind warte ich zeig euch ne Seite wie ich dass meine:also so ähnlich wie der Hund das is nur ca. 30 grad gedreht :http://maik-h.de/home/

sejuma

1. 4.

Code

#navcontainer ul
{
list-style-type:circle; 
text-align: left;
margin-left:0;
float:left;
}

2. Daneben zwei weitere Container setzen:

Code

<div style="width:400px; margin-left:150px;">Inhalt</div>
<div style="width:150px; margin-left:550px;">Rechtsmenue</div>

Martin279

Vielen Dank !
Jetzt fehlt nur noch :
Wie kann ich Bilder oben links in die ecke setzen und so ca.30 drehen ?

und:

Wie kann ich mein Menü unterteilen??

Martin279

häää also ich habe jetzt mal versucht das Menü links zu setzen aber es klappt nicht !
1.es ist immer noch zu weit mittig und 2. Die Items sind wieder gerutscht obwohl ich es im CSS geändert hab !
Seeeyah Code

HTML

<html>
<head>
<title>Projekt_Aplpha</title>
<style type="text/css">
.rot
{


 font-family: Verdana, Arial, Helvetica, sans-serif;
}


div
{
font-size:12px;font-family:Verdana;
position:absolute;width:100px;height:200px;
background-color:#EEEEDD;
}
.div1
{
border:1px solid #aaaaaa;
left:150px;top:70px;
width:700px;height:100px;
-moz-border-radius:10px;
}


.div2
{
border:1px solid #aaaaaa;
left:150px;top:170px;
width:700px;height:340px;
-moz-border-radius:10px;
}
#navcontainer ul
{
list-style-type:circle;
margin-left:0;
float:left;
list-style-type: none;
text-align: left;
}


#navcontainer ul li a
{
background: transparent url(images/list-off.gif) left center no-repeat;
padding-left: 15px;
text-align: left;
font: normal 11px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
text-decoration: none;
color: #999;
}


#navcontainer ul li a:hover
{
background: transparent url(images/list-on.gif) left center no-repeat;
color: black;
}


#navcontainer ul li a#current
{
background: transparent url(images/list-active.gif) left center no-repeat;
color: #666;
}
</style>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<center>
<div class="div1"><center>[img]Banner_Projekt_Alpha.jpg[/img]</center></div>
<div class="div2">
<div style="width:400px; margin-left:150px;"><div id="navcontainer">
<ul id="navlist">
Life
<li id="active">[url='#']>>Ü[/url]
[*][url='#']>>Item two[/url]
[*][url='#']>>Item three[/url]
[*][url='#']>>Item four[/url]
[*][url='#']>>Item five[/url]</div>






<p class="rot" >Beispiel Text</p>


Counter:
[url='http://www.directcounter.de/stats/926582251.htm'][img]http://www.directcounter.de/dc/?uid=926582251[/img][/url]


[/list]
</div>
</center>
</body>
</html>

Alles anzeigen

Danke MArtin

sejuma

zu 1.
Abgerundete Ecken interpretiert noch nicht jeder Browser. Entweder verzichtest du darauf und nimmst einen normalen Rahmen oder du bastelst dir eine pixelgenaue Hintergrundgrafik.

Zu 2.
Einfach die vorhandene Navi kopieren, ins Rechtsmenue einfügen und die überflüssigen Links löschen.

Martin279

ohhh lol das geht ja grad rishctisch schief !Kann st du mir mal den richtigen Code geben ???
zu1.Ich habe die runden ecken weggemacht und trotzdem ist das Menü links zu mittig(das menü links hab ich jetzt aber weggemacht!) und zu 2.Das klappt garnicht !
Der Code sieht jetzt soo aus:

HTML

<html>
<head>
<title>Projekt_Aplpha</title>
<style type="text/css">
.rot
{


 font-family: Verdana, Arial, Helvetica, sans-serif;
}


div
{
font-size:12px;font-family:Verdana;
position:absolute;width:100px;height:200px;
background-color:#EEEEDD;
}
.div1
{
border:1px solid #aaaaaa;
left:150px;top:70px;
width:700px;height:100px;


}


.div2
{
border:1px solid #aaaaaa;
left:150px;top:170px;
width:700px;height:340px;


}
#navcontainer ul
{
list-style-type:circle;
margin-left:0;
float:left;
list-style-type: none;
text-align: left;
}


#navcontainer ul li a
{
background: transparent url(images/list-off.gif) left center no-repeat;
padding-left: 15px;
text-align: left;
font: normal 11px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
text-decoration: none;
color: #999;
}


#navcontainer ul li a:hover
{
background: transparent url(images/list-on.gif) left center no-repeat;
color: black;
}


#navcontainer ul li a#current
{
background: transparent url(images/list-active.gif) left center no-repeat;
color: #666;
}
</style>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<center>
<div class="div1"><center>[img]Banner_Projekt_Alpha.jpg[/img]</center></div>
<div class="div2">




<div style="width:150px; margin-left:550px;">Life
<div id="navcontainer">
<ul id="navlist">
<li id="active">[url='#']>>Ü[/url]
[*][url='#']>>Item two[/url]
[*][url='#']>>Item three[/url]
[*][url='#']>>Item four[/url]
[*][url='#']>>Item five[/url]</div>






<p class="rot" >Beispiel Text</p>


Counter:
[url='http://www.directcounter.de/stats/926582251.htm'][img]http://www.directcounter.de/dc/?uid=926582251[/img][/url]


[/list]
</div>
</center>
</body>

Alles anzeigen

Was ist falsch !?
Und wie kann ich "wenn "das endlich klappt (Menü links und rechts) den Info text schreiben so dass er mittig ist??Brauch ich dazu einen spezi befehl??
Und wie sieht das jetzt mit den "oberbegriffen" im Menü aus?

Achja und danke das du dich so nett um mich kümmerst

sejuma

Das hängt daran, dass du jetzt die linke Navi weggelassen hast. Da passen dann die Abstände nicht mehr.
Dein Code ist ohnehin etwas unübersichtlich.
Versuch deshalb mal nach folgendem Muster einen kompletten Neuaufbau, damit du auch später noch durchblickst:
http://www.stichpunkt.de/css/4-box.html

Martin279

soooo soll die Page aber garnicht ausshen (vom Grundbau her)!
Kannst du mir nicht einfach den richtigen Code geben ??
Ich behalte schon die Übersicht !Aber wenn ich das 2. Menü Einfüge dann klappt das nicht dann stimmen die abstädne nicht !Bitte sag mir einfach den Code und wie ich im Menü "oberbegriffe "machen kann!

Danke

sejuma

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Projekt_Aplpha</title>
<style type="text/css">
div
{
font-size:12px;font-family:Verdana;
position:absolute;width:100px;height:200px;
background-color:#EEEEDD;
}
.div1
{
border:1px solid #aaaaaa;
left:150px;top:70px;
width:700px;height:100px;
-moz-border-radius:10px;
}


.div2
{
border:1px solid #aaaaaa;
left:150px;top:170px;
width:700px;height:340px;
-moz-border-radius:10px;
}
#navcontainer ul
{
width:150px;
list-style-type:circle;
text-align: left;
margin-left:0;
float:left;
}


#navcontainer ul li a
{
background: transparent url(images/list-off.gif) left center no-repeat;
padding-left: 15px;
text-align: left;
font: normal 11px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
text-decoration: none;
color: #999;
}


#navcontainer ul li a:hover
{
background: transparent url(images/list-on.gif) left center no-repeat;
color: black;
}


#navcontainer ul li a#current
{
background: transparent url(images/list-active.gif) left center no-repeat;
color: #666;
}


#mitte
{
width:398px;
margin-left:150px;
float:left;
}
#rechts
{
width:100px;
margin-left:550px;
}
</style>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">


<div class="div1"><center>Hier ist der Banner bereich !</center></div>
<div class="div2">
<div id="navcontainer">
<ul id="navlist">
links
<li id="active">[url='#']Item one[/url]
[*][url='#']Item two[/url]
[*][url='#']Item three[/url]
[*][url='#']Item four[/url]
[*][url='#']Item five[/url]
[/list]
</div>
<div id="mitte">mitte</div>
<div id="rechts">
<div id="navcontainer">
<ul id="navlist">rechts
<li id="active">[url='#']Item one[/url]
[*][url='#']Item two[/url]
[*][url='#']Item three[/url]


Oberbegriff
[*][url='#']Item four[/url]
[*][url='#']Item five[/url]
[/list]
</div>
</div>
</div>
</body>
</html>

Alles anzeigen

Was Abstände betrifft musst du dich mal mit padding und margin auseinandersetzen.

Martin279

Booooah krass danke was du dir fürn Aufwand machst !!!
Gooil stelle ich gleich mal online !
Hab nur wieder ein paar Fragen

Hab mich schon etwas (ein paar tuts)mit Css auseinandergesetzt doch leider noch keinen Code gefunden für mein Problem:

Ich möchte gerne das wenn ich ein bisschen mehr Text habe alles verlängert wird !
Also der Mitte bereich wird größer und die Menü seiten !!!!

sejuma

Da musst du dich entscheinden, "welchen Tod du sterben willst"
Entweder willst du eine fixe Höhe, dann musst du die in den div's entsprechend definieren. Wenn du noch "overflow:auto;" hinzufügst, bewirkt dies, dass man scrollen kann, wenn der Text länger ist als der Container.

Sollen die kleineren Spalten immer "mitwachsen" und sich der Länge der jeweils größten Spalte anpassen, dann brauchst du ein flexibles Layout, z.B. nach folgendem Schema:

Code

<HTML>
<HEAD>
<TITLE>CSS und HTML</TITLE>


<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Your Page Title Here</title>
<style type="text/css">
body
{margin:0;
padding:0;}
#mainBox
{
position: relative;
display: block;
background: #dfdfdf;
border-left: 170px solid #f00;
border-right: 170px solid #ff0;
}


#innerBox
{
display: block;
margin-left: -170px;
margin-right: -170px;
padding: 5px;
}


#leftBox
{
float: left;
position: relative;
width: 170px;
left: 0px;
}


#rightBox
{
float: right;
position: relative;
width: 160px;
right: 0px;
}


#centerBox
{
margin-left: 170px;
margin-right: 170px;
position: relative;
display: block;
height: 1%;
}


.clear
{
clear:both;
}
</style>


</head>
<body>
<div id="mainBox">
        <div id="innerBox">
                <div id="leftBox">


Zeile 1</p></div>


                <div id="rightBox">


Zeile 1</p>


Zeile 2</p>


Zeile 3</p></div>


                <div id="centerBox">


Zeile 1</p>


Zeile 2</p></div>


                <div class="clear"></div>
        </div>
</div>
</body>
</html>

Alles anzeigen

Martin279

Also wie sieht der Code aus den ich einfügen muss damit sich die Zeilen anpassen und wenn ich mehr tEXT HAB das die Mitte dann größer wird??
WEil scrollen find ich blöde !

sejuma

So, aber das funktioniert nur dann, wenn du für alle drei Bereiche einen einheitlichen Hintergrund hast, der im div #all definiert ist.

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Projekt_Aplpha</title>
<style type="text/css">


body
{margin:0;
padding:0;
}
#all
{position:absolute;
left:50%;
margin-left:-350px;
margin-top:70px;
width:700px;
border:1px solid #aaaaaa;
background-color:#EEEEDD;
}


.div1
{
border:1px solid #aaaaaa;
height:100px;
}


#navcontainer
{
width:150px;
float:left;
}


#navcontainer ul li a
{
list-style-type:circle;
text-align: left;
margin-left:0;
background: transparent url(images/list-off.gif) left center no-repeat;
padding-left: 15px;
text-align: left;
font: normal 11px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
text-decoration: none;
color: #999;
}


#navcontainer ul li a:hover
{
background: transparent url(images/list-on.gif) left center no-repeat;
color: black;
}


#navcontainer ul li a#current
{
background: transparent url(images/list-active.gif) left center no-repeat;
color: #666;
}


#mitte
{
width:400px;
float:left;
}
#rechts
{
width:150px;
float:right;
}
</style>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<div id="all">
<div class="div1"><center>Hier ist der Banner bereich !</center></div>


<div id="navcontainer">
<ul id="navlist">
links
<li id="active">[url='#']Item one[/url]
[*][url='#']Item two[/url]
[*][url='#']Item three[/url]
[*][url='#']Item four[/url]
[*][url='#']Item five[/url]
[/list]
</div>


<div id="mitte">




mitte</p>


</div>


<div id="rechts">
<div id="navcontainer">
<ul id="navlist">rechts
<li id="active">[url='#']Item one[/url]
[*][url='#']Item two[/url]
[*][url='#']Item three[/url]


Oberbegriff
[*][url='#']Item four[/url]
[*][url='#']Item five[/url]
[/list]
</div>
</div>




</div>


</body>
</html>

Alles anzeigen

Martin279

Okay wieder einige Fragen:

Ich möchte jetzt um die Menü`s einen Rahmen ziehen !
Kann ich das mit div`s machen oder wie anders??

DarkSyranus

Ja, kann man.
Nim CSS border.
Und das ist jetzt wirklich nicht schwer.
Das solltest du schaffen =)

Martin279

cool Danke und wie kann ich festlegen wie LANG der Rahmnen sein soll ?!
Also ncih durchgezogen sonder von da... bis da...?

DarkSyranus

Das geht nun wieder einmal nicht =)
Man kann (biseher) nur einer komplette Seite eines Element einen Rahmen geben.
Du müsstest exaxt für die Länge ein anderes Element machen, dem du dann den Rahmen gibst.

Martin279

OHHHH Shit Also:

Ich sitze gerade an meinem neuen Design habs auch schon fertich (rot style)
Hab alles hochgeladen mit Bilder neue Datei und allem !!!
Aber er zeigt mir im FF nicht einmal den neuen Banner an sondern den Alten den ich schon längst entfernt hab !Und im IEzeigt er mir zwar den Banner an aber nicht das neue Hintegrund Bild!!!!!!!!!!!!!!! Was ist schief gelaufen ???

DarkSyranus

Moin
Poste bitte Code und URL, wo man sich das ansehen kann.
Vorher lösch jedoch in beiden mal den Cache.
Falls du es nicht fidnest, benutzt die Forensuche, hier gabs mal ähnliche Threads.
Wenns nicht geht hier Code etc. posten

Martin279

Also Link zur Seite:
http://freakmartin279.fr.funpic.de/

Dann Code index.html:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Projekt_Aplpha</title>
<style type="text/css">


body
{margin:0;
padding:0;
}
#all
{position:absolute;
left:46%;
margin-left:-350px;
margin-top:70px;
width:800px;
border:1px solid #aaaaaa;
background-color:#EEEEDD;
-moz-border-radius:10px;
}


.div1
{
border:1px solid #aaaaaa;
height:100px;
-moz-border-radius:10px;
}


#navcontainer
{
width:150px;
float:left;
}


#navcontainer ul li a
{
list-style-type:circle;
text-align: left;
margin-left:0;
background: transparent url(images/list-off.gif) left center no-repeat;
padding-left: 15px;
text-align: left;
font: normal 11px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
text-decoration: underline;
color: #551122;
}


#navcontainer ul li a:hover
{
background: transparent url(images/list-on.gif) left center no-repeat;
color:#551122;
}


#navcontainer ul li a#current
{
background: transparent url(images/list-active.gif) left center no-repeat;
color: #552222;
}


#mitte
{
width:430px;
float:left;
}
#rechts
{
width:180px;
float:right;
}
 #navcontainer { margin-left: 30px; }


#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: verdana, arial, sans-serif;
}


#navcontainer li { margin: 0; }


#navcontainer a
{
display: block;
color: #333;
background-color: transparent;
width: 100px;
padding: 2px 10px;
text-decoration: none;
border-top: 1px solid #aaa;
border-bottom: 1px solid #aaa;
border-left: 1px solid #aaa;
font-size: 12px;
}


#navcontainer a:hover
{
background-color: #551122;
color: #551122;
border-right: 10px solid #aaa;
padding: 2px 1px 2px 10px;
}


#navcontainer ul ul
{
margin-left: 30px;
padding: 0;
list-style-type: none;
}


#navcontainer li li a
{
display: block;
color: #333;
background-color: #551122;
width: 110px;
padding: 2px 10px;
margin: 0;
border-top: none;
border-bottom: none;
border-left: 1px solid #aaa;
text-decoration: none;
font-size: 12px;
}
#News
{
position:absolute;
border:1px solid #aaaaaa;
width:300px;
height:30px;
left:270px;
background-color:#FFFFFF;
}
.rot
{
font-size:2em;
color:#551122;
margin-top:1px;
}
.rot1
{
color:#551122;
}


#News1
{
background-color:#FFFFFF;
position:absolute;
border:1px solid #aaaaaa;
width:400px;
height:200px;
left:210px;
}


</style>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<div id="all">
<div class="div1"><center>[img]Banner_Projekt_Alpha.jpg[/img]</center></div>


<div id="navcontainer">
<ul id="navlist">
Life
<li id="active">[url='index.html']<blink>News</blink>[/url]
[*][url='#']Aboutme[/url]
[*][url='#']Welli`s[/url]


Links
[*][url='#']Lustige Links[/url]
[*][url='#']Hilfreiche Links[/url]
[*][url='#']Linkpartner[/url]


Sonstiges
[*][url='#']Umfragen[/url]
[*][url='#']Gästebuch[/url]


[/list]
</div>


<div id="mitte">
<div id="News">
<center><p class="rot">News</p></center></div>










<div id="News1">
Samstag 14.4.07 13:00
<hr>
<p class="rot1">Halli,Hallo!
Also es gibt Neuigkeiten!Meine Seite nimmt am Designconstest vom
[url='http://www.forum-hilfe.de']Forum-Hilfe[/url] Board teil!*stolzsei*
Beim Contest schicken viele User vom Forum Hilfe Board ihre Page ein und werden von den User und
Community bewertet !
Ich muss sagen da sind ein paar sehr gute Seiten die dran Teil nehmen !Als Schluß wort möchte ich noch
Driver danke sagen das er mir das Pic zur Verfügung gestellt hat:</p>
</div>






























<center>
<script language=JavaScript src=http://www.webmods.de/modul.php?KD_ID=1073586111&MOD=counter></script></center>
 






</div>
<div id="rechts">
<div id="navcontainer">
<ul id="navlist">Service
<li id="active">[url='#']Regelung[/url]
[*][url='#']Wenn interesse[/url]


Musik
[*][url='#']Meine Musik[/url]
[*][url='#']Greenday[/url]
[*][url='#']Billy Talent[/url]
[*][url='#']NirvanNa[/url]
[/list]
</div>
</div>




</div>
<body background="background.jpg">
</body>
</html>

Alles anzeigen

Mehr gibts eigt. nicht zu sagen ...

Html,Css Frage (wiedereinmal von mir)

Tags

Benutzer online in diesem Thema