Hallo an Euch alle, vorab grüße ich Euch, denn ich bin neu hier :)
Zu meiner Situation: Ich bin erst seit kurzem dran, mit CSS und HTML ein bisschen rumzuwerkeln und habe mich bereit erklärt für meine Arbeit ein simples, dreispaltiges Layout erstellen - welches am Montag gelauncht werden soll.
Eins habe ich schon fertig, allerdings in der Kombination mit DIVs und TABLEs. Mein Vorgesetzter wünscht nur DIVs. So: Auf selfhtml gegangen und 3-spaltiges Layout nachgebastelt und ein wenig modifiziert. Ich finde zwar mit TABLEs lässt es sich wesentlich einfacher und angenehmer arbeiten, aber jedem dem ich davon erzähle springt mir fast an den Hals -> Total oldschool!, Nicht Suchmaschinenoptimiert bla bla. - Haben se ja auch alle Recht
Mein Problem ist nun der rechte DIV-Container und der Einzug passt nicht genau, habe schon viel mit margin und padding ausprobiert aber noch nie ein treffendes Ergebniss erzielt. Anbei werde ich einen Screenshot anhängen und den dazugehörigen Code.
Wäre echt supi, wenn ihr mir helfen könntet. Code darf natürlich sehr gerne umgeschrieben und optimiert werden - lasst es mich aber wissen
Muss leider das Logo etwas unkenntlich machen, da es für die Arbeit ist und natürlich noch nicht gelauncht ist.
Hoffe wirklich dringend auf Hilfe! :?
Zu meiner Situation: Ich bin erst seit kurzem dran, mit CSS und HTML ein bisschen rumzuwerkeln und habe mich bereit erklärt für meine Arbeit ein simples, dreispaltiges Layout erstellen - welches am Montag gelauncht werden soll.
Eins habe ich schon fertig, allerdings in der Kombination mit DIVs und TABLEs. Mein Vorgesetzter wünscht nur DIVs. So: Auf selfhtml gegangen und 3-spaltiges Layout nachgebastelt und ein wenig modifiziert. Ich finde zwar mit TABLEs lässt es sich wesentlich einfacher und angenehmer arbeiten, aber jedem dem ich davon erzähle springt mir fast an den Hals -> Total oldschool!, Nicht Suchmaschinenoptimiert bla bla. - Haben se ja auch alle Recht
Mein Problem ist nun der rechte DIV-Container und der Einzug passt nicht genau, habe schon viel mit margin und padding ausprobiert aber noch nie ein treffendes Ergebniss erzielt. Anbei werde ich einen Screenshot anhängen und den dazugehörigen Code.
Wäre echt supi, wenn ihr mir helfen könntet. Code darf natürlich sehr gerne umgeschrieben und optimiert werden - lasst es mich aber wissen
Muss leider das Logo etwas unkenntlich machen, da es für die Arbeit ist und natürlich noch nicht gelauncht ist.
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout</title>
<style type="text/css">
body {
color: black;
background: #feffff; /* Old browsers */
background: -moz-linear-gradient(top, #feffff 30%, #c9dede 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(30%, #feffff), color-stop(100%, #c9dede)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #feffff 30%, #c9dede 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #feffff 30%, #c9dede 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #feffff 30%, #c9dede 100%); /* IE10+ */
background: linear-gradient(to bottom, #feffff 30%, #c9dede 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#c9dede', GradientType=0 ); /* IE6-9 */
background-attachment: fixed;
font-size: 100.01%;
font-family: Helvetica, Arial, sans-serif;
margin: 0;
padding: 1em;
min-width: 41em; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */
}
#header {
background-color: #FFF;
border: 1px solid black;
}
div#Inhalt {
padding: 0 1em;
border: 1px dashed silver;
position: static;
background-color: #FFF;
margin-bottom: 28em;
margin-left: 28em;
margin-right: 28em;
margin-top: 0;
}
div#Inhalt p {
font-size: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 1px;
margin-top: 1em;
}
p#footer {
clear: both;
font-size: 0.9em;
margin: 0;
padding: 0.1em;
text-align: center;
background-color: lightblue;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="Inhalt">
<div id="header" align="right"><img src="../Logo123.gif" width="270" alt=""/></div>
<div>
<div style="width:33%; float:left; text-align:left; border:1px solid;">Links<br>
<br>
<br>
<br>
<br>
</div>
<div style="width:33%; float:left; text-align:left; border:1px solid;">Mitte<br>
<br>
<br>
<br>
<br>
</div>
<div style="width:33%; float:left; text-align:left; border:1px solid;">Rechts<br>
<br>
<br>
<br>
<br>
</div>
</div>
<p id="footer">2013 - unseredomain.de</p>
</body>
</html>Hoffe wirklich dringend auf Hilfe! :?
