Layout platzt :-(

von **marco1079** » 02.05.2006, 15:54

Das Layout und die Zentrierung funktionieren alles wie ich es mir vorstelle,nur wenn ein längerer Text im "main" steht geht das design wieder kaputt...dabei hab ich doch overflow auf auto, so das er scrollen sollte..

basis.css
------
body { color: #01437b; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; background-color: white; scrollbar-3dlight-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color: #FFFFFF; scrollbar-arrow-color: #01437b; scrollbar-base-color: #FFFFFF; scrollbar-face-color: #EEEEEE; scrollbar-track-color: #FFFFFF; }

h1,h2,h3,h4 { font-size:12px;font-family: Verdana, Arial, Helvetica, sans-serif; }

p {}

td {}

a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
color: #01437B;
text-decoration: none;
}
a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
color: #01437B;
text-decoration: none;
}
a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
color: #FFFFFF;
background-color: #01437B;
text-decoration: none;
}
a:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
color: #01437B;
text-decoration: none;

---------------------------------------------------------------
test1.html
---------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Adobe GoLive" />
<title>Test Site</title>
<link href="css/basic.css" rel="stylesheet" type="text/css" media="all" />
<style type="text/css" media="screen"></style>

</head>

<body>

<div id="logo">
<img src="images/voiceWAN.gif" alt="" width="150" height="111" border="0" >
</div>
<div id="back">

<div id="navi" >
  <a href="index.html" target="_self" >Unternehmen</a>         <a href="lan.html" target="_self">LAN</a>          <a href="wlan.html" target="_self">WLAN</a>          <a href="voip.html" target="_self">VOIP</a>         <a href="security.html" target="_self">SECURITY</a>           <a href="hardware.html" target="_self">Hard-/Software</a>
</div>

<div id="navi2">
  <span class="Stil1">LAN - Lokale Netze, Client-Server-Lösungen</span>
</div>

<div id="main">
<p>Die Anforderungen an ein modernes Unternehmensnetz steigen auf Grund sich weiter entwickelnden Technologien ständig. Heute fällt einer leistungsfähigen, flexiblen, sicheren und zuverlässigen Netzwerkstruktur eine Schlüsselrolle für Ihren unternehmerischen Erfolg zu.</p>
<p>Um eine solche zeitgemäße Lösung zu erreichen, erarbeitet VoiceWAN, nach eingehender Bedarfsanalyse, mit Ihnen zusammen, ein Netzwerkkonzept, das auch zukünftigen Anforderungen genügt.</p>
<p>VoiceWAN trägt dafür Sorge, dass von der Beratung über die Planung bis zur kompletten Installation in Zusammenarbeit mit Ihnen das gesamte Projekt kompetent und zuverlässig abgewickelt wird.</p>
<p>Unser Selbstverständnis als Fullservicepartner beinhaltet auch, unsere Flexibilität so einzusetzten, dass Produktivitätsausfälle in Ihrem Unternehmen vermieden werden. Wir werden daher auch zu den Zeiten tätig, die optimal in Ihre betrieblichen Abläufe passen, gerne auch nachts und an Sonn- und Feiertagen.</p>
<p>Nach Realisierung lassen wir Sie nicht allein. Fernmanagement, Computerservice und Support, der für Sie 24 Stunden am Tag und 7 Tage die Woche zur Verfügung steht, garantieren eine maximale Verfügbarkeit Ihrer Systeme.</p>
<p>Eine gründliche Einweisung Ihres Personals, sowie Schulungen und Vorträge gehören ebenso zu unserem Leistungsspektrum.</p>
<div align="left">
<p><u>Maßnahmen zur Optimierung der Verfügbarkeit </u><br />
- Firewall<br />
- Anti-Virenlösungen<br />
- Fernüberwachung<br />
- Automatische Softwareverteilung<br />
- Backup/Restore/Imaging Hochverfügbarkeitslösungen<br />
- Loadbalancing<br />
- Clustering<br />
- Bandbreitenmanagement (QoS)</p>
<p><u>Lösungen mit weiteren aktiven Komponenten </u><br />
- WLAN<br />
- WLAN-Netzwerkkopplung<br />
- Smartphones und Organizer<br />
- Konferenzlösungen<br />
- Streaming<br />
- Videoüberwachung<br />
- NAS (Network attached Storage)<br />
- SAS (Server attached Storage)<br />
- Kommunikationslösungen/VoIP</p>
<p><u>Server </u><br />
- Intranetserver<br />
- Datenbankenserver<br />
- Mailserver<br />
- Druckserver, Fileserver, Faxserver<br />
- Groupwareserver (Microsoft Exchange, Open Source Lösungen)<br />
- Remote Access Server/Appliances<br />
- Unified-Messaging-Server (Integrierte Kommunikation)</p>
<p><u>Plattformen Betriebssysteme</u><br />
- Windows<br />
- UNIX<br />
- Linux</p>
</div>
</div>
<div id="imp">
<a href="kontakt.html" target="_self">Kontakt/Impressum</a>
</div>
</body>
---------------------------------------------------------------
Ich werde daraus irgendwie nicht schlau, welches Layer überlagert denn da welches? wenn ich die grösse von "main" auf 380 bis 390 anpasse geht das layout nicht mehr kaputt, aber dann rutscht der "kontakt/impressum" inhalt in das bild, wo er nicht hinsoll....Hat jemand eine Idee?

von **Laus** » 02.05.2006, 18:05

Wenn Ich das mit deinem Quelltext probiere sieht es in IE FF und Opera gleich aus. Kontakt/Impressum ist Unterhalb des Hauptfenster so wie es sein soll. overflow klappt auch. Wenn es bei dir nicht geht wäre einen Link wo man sich das ansehen kann nicht schlecht?
Was mir sonst noch auffällt, das abschließende " </html>" fehlt und die Navigation wäre besser in einer Liste aufgehoben als wie in einem Konstrukt aus " " Beispiele hierzu findest Du hier.
Im CSS solltest Du Angaben wie "top: 151;" besser als "top: 151px;" auszeichnen, sonst werden die Angaben von verschiedenen Browsern eventuell unterschiedlich interpretiert.
Noch was grundsätzliches: Code bitte beim Posten auch als solchen auszeichnen, dafür ist die Formatierungs Funktion da. Es erleichtert das Lesen und Kopieren das Codes erheblich.

Gruß Xaver

von **marco1079** » 03.05.2006, 16:24

Also ich hab nun mal zwei Beispiele für das "platzen des Layouts" testweise hochgeladen.

www.la-rosa.de/test/index.html - wird korrekt angezeigt,
www.la-rosa.de/test/lan.html - das Layout fällt auseinander...(es ist mehr text enthalten, so dass gescrollt werden muss)

laus hat geschrieben:Wenn Ich das mit deinem Quelltext probiere sieht es in IE FF und Opera gleich aus. Kontakt/Impressum ist Unterhalb des Hauptfenster so wie es sein soll. overflow klappt auch. Wenn es bei dir nicht geht wäre einen Link wo man sich das ansehen kann nicht schlecht?

von **Laus** » 03.05.2006, 18:16

Hab dein Style etwas verändert. Nun sieht es im IE und FF gleich aus. Das mit dem Zerfallen hab ich Gelöst in dem ich #imp ein margin-top. 5px gegeben habe. #navlist bekam ein text-align: center für den IE und in #back habe ich das background-position:center entfernt.
Hier nochmal dein komplettes Style

Code: Alles auswählen: body { margin: 0; padding: 0; background-color:#fff; } #back { text-align:center; margin:0px auto; background-color:#fff; background-image:url(images/main.jpg); background-repeat:no-repeat; height: 440px; width: 700px; } #logo { height: 111px; width: 150px; top: 5px; text-align:left; margin:0 auto; } #navlist { height: 16px; width: 700; text-align:center; margin:auto; top: 130px; } #navi2 { height: 16px; width: 700px; text-align:left; margin:auto; top: 151px; } #main { height: 400px; width: 680px; text-align:left; margin:auto; overflow:auto; top: 181px; } #imp { height: 15px; width: 200px; top: 565px; text-align:left; margin:5px auto 0px; } .Stil1 { font-size: 14px; font-weight: bold; } #navlist li { display: inline; list-style-type: none; margin:auto; padding-left: 20px; }

Gruß Xaver

von **marco1079** » 05.05.2006, 13:44

Ok also so sieht das ganze doch schon viel besser aus.
www.la-rosa.de/test/index.html

Jetzt möchte ich den Text bzw. Inhalt des Containers noch etwas vom Rand abrücken damit es nicht so gequetscht aussieht.

Also navlist, navi2 und main ein stück vom rand weg rücken und zwar links, rechts, oben und unten jeweils ca. 10px.
Wenn ich versuche die Positionsangaben mittels z.B. top:151px; zu ändern,
passiert jedoch garnichts, welches ist der richtige Befehl dafür ?

Vielen Dank für alles!

mfg,
Marco

von **Laus** » 05.05.2006, 14:25

Da bei dir die Größe des äußeren Container fest ist musst du die Größen der Inneren Elemente anpassen.
Also #navlist width: 690px statt 700px,
#navi2 width: 680px statt 700px,
#main height: 370px; width: 660px; statt height: 400px; width: 680px;
und #imp gibst du margin:15px auto 0px; oder margin:20px auto 0px; um den abstand wieder herzustellen.

schönes WE wünscht Xaver

von **marco1079** » 05.05.2006, 14:49

kann ich damit auch den abstand der navlist zum oberen rand einstellen?
da wären so 10px auch gut...
hier nochmals die angepasste version. --> www.la-rosa.de/test/index.html

achja, und seit dem hüpft der kontakt button auf "lan.html" nach oben, wie kann ich dem entgegenwirken?

Danke für deine Hilfe!

von **Laus** » 05.05.2006, 15:20

Gib deiner #navlist mal ein padding:10px; müsste klappen.

von **marco1079** » 05.05.2006, 15:27

Ja das war gut danke,
schaust du bitte nochmal nach dem lan.html, da springt der kontaktbutton ca. 10-20px hoch ohne (für mich) erkennbaren Grund...

www.voicewan.net/lan.html

von **Laus** » 05.05.2006, 17:19

Du hast im #main ein <div align="left"> dies musst du entweder entfernen, oder wenn du das absichtlich eingefügt hast, mit </div> wieder schließen.

von **marco1079** » 05.05.2006, 17:23

Vielen Dank das wars erstmal, das fertige Resultat steht unter www.voicewan.net

Ich wünsche ein schönes Wochenende!!!!

Layout platzt :-(

Layout platzt :-(

Ähnliche Beiträge zu "Layout platzt :-("

Wer ist online?