Unterseite erstellen?!?!?

driver

des is bißchen tricky des ganze. im einen browser verschiebt sichs, im anderen nicht. musst versuchen
nen mittelweg zu finden. is schwer zu sagen wenn ma net mehr vom code kennt...

draugal

nee. irgendwas mach ich grundsätzlich falsch. nur ich weiß nicht was.

Code

#page {
    width:800px;    
    height:440px;    
    margin: auto;    
    background: white;
}

#header {
    background-color:#FFF;
    height:80px;
    width;800px;
    background-image: url(img/header.png);
    background-repeat: no-repeat;
}




#box1 {
    width:400px;
    height:310px;
    background-color: #FFF;
    float:left;
    background-image: url(img/box1.png);
    background-repeat: repeat;
    padding: 1px;
}


#box2 {
    width:400px;
    height:310px;
    background-color: #FFF;
    float:left;
    background-image: url(img/box2.png);
}


.clearer{ 
    clear:both;
}


#footer {
    float:left;
    background-color: #FFF;
    background-image: url(img/footer.png);
    width:800px;
    height:50px;
}


/* Menü */
#menu {
    background-color: #03C;
}


#menu li {
    display: inline;
}

Alles anzeigen

so, wenn ich hetzt versuche, beispielsweise in box1 margin oder padding 1 oder mehr zu benutzten, verschieb sich alles total.

driver

gib auchmal html-code

draugal

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title>text text</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="david" />
<meta name="Content-Language" content="de" />
<meta name="KeyWords" content="text text" />
<meta name="Description" content="text text" />
<link href="styles.css" rel="stylesheet" type="text/css" media="screen, projection" />
</head>


<body>
<div id="page">
    <div id="header">
        <ul id="menu">
            <li><img src="img/homeR.png" width="45" height="20" alt="home"><li>
            <li><a href="#"><img src="img/konzept.png" width="61" height="20" alt="konzept" border="0"></a><li>
            <li><a href="#"><img src="img/team.png" width="41" height="20" alt="team" border="0"></a></li>
            <li><a href="#"><img src="img/kontakt.png" width="58" height="20" alt="kontakt" border="0"></a></li>
            <li><a href="#"><img src="img/anfahrt.png" width="58" height="20" alt="anfahrt" border="0"></a></li>
            <li><a href="#"><img src="img/info.png" width="45" height="20" alt="info" border="0"></a></li>
        </ul>
    </div>
    <div id="box1">adsad</div>
    <div id="box2">asdasd</div>
    <div id="footer">asdasd</div>
</div>

Alles anzeigen

driver

a) wozu 2 html-tags ?
b) body und html wieder schließen
c) auf schreibfehler achten (bei header z.b. ein ; statt : bei width)
d) die boxen sollen nebeneinander sein, da evtl immer paar px toleranz berechnen (400+400 sind zwar 800, aber 395 geht auch)

des erstmal grob. was wilslte denn jetzt genau anders haben ? bzw was soll wohin verschoben sein ?

draugal

gib doch mal padding:40px bei box 1 oder so an, es verschiebt sich alles.
und mit 395 wär es ein problem, weil ich ein hintergrundbild in die verscheidenen boxen legen wollte...
oder kann ich das über #page definieren und braucsh garnicht zu sclicen, damits passt ?

driver

leg mal im css noch * { padding:0px; margin: 0px } fest - dann wird schonmal grundsätzlich alles zurückgesetzt.

und dann versuch mal die werte abzuziehen. also wenn du padding 40 angibst, musste des von höhe und breite abziehen.
also dann 400 breite - 40 (links padding) - 40 (rechts padding) = 320
oder für die andere 310 höhe - 40 (oben padding) - 40 (unten padding) = 230

dann hast nen rahmen und des hintergrundbild passt a...

draugal

perfekto!!!
du siehst die navigationsleiste oder?
die will ich rechts, nicht ganz am rand positionieren.
das muss ich dann vermutlich ähnlich machen oder?
ich hab auf selfhtml soviele beispiele mit absolute und relativ gesehen, ist das für sowas nicht sinnvoll?
wann nutze ich das überhaupt?

driver

da würd ich dann im header ein text-align:right machen, dann wird des menü schonmal
recht positioniert - anschließend noch mit padding-right den abständ entsprechend anpassen.

draugal

coole sache, habs hinbekommen!
dank dir!
ich werd die page mal posten, wenn ich ganz fertig bin
langsam steig ich durch css durch, garnicht so verkehrt

draugal

jetzt bräuchte ich eine entscheidungshilfe oder einen tipp, ist es sinnvoller ein rollover per css einzubinden oder lieber mit java ?
im dreamweaver beispielsweise geht das ja sehr schnell über die einfügenfunktion, oder ist das shit?

driver

ich kenn dreamweaver nicht, keine ahnung was der fürn code erzeugt. ich bevorzuge da immer notepad++.
meinst du java oder javascript ? gibts nämlich nen ziemlichen unterschied.... und vorallem für was willst
den effekt ?

grundsätzlich sag ich mal für alles wichtige immer css verwenden. für viele is javascript n sicherheitsrisiko
und deshalb ausgeschaltet - wennst also n js-menü hast... wirds dort einfach unbrauchbar.

für spielereien kannste aber natürlich auch js nehmen, wennst unbedingt willst. sonst denk ich is css
immer die beste lösung...

draugal

also ich hab halt mit photoshop jeweils immer buttons gemacht.
jetzt würd ich gerne ein rollovereffekt dadrauf legen.

Tags