|
|||
Div's nebeneinander gleich groß
erste html Datei dient als template
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>PlugItOnPlaket</title> <link rel="stylesheet" type="text/css" href="basic.css" /> <!-- css --> </head> <body> <div id= "content"> <div id="platzhalter"></div> <div id="menue"> <div id="Logo"></div> <div id="menue_left"></div> <div id="menue_middle"></div> <div id="menue_right"></div> <div id="menue_text"><a href="?site=startseite">Startseite</a><a href="?site=überuns">Über Uns</a><a href="?site=kontakte">Kontakte</a><a href="?site=impressum">Impressum</a></div> </div> <div id= "inhalt"><!-- inhalt --></div> <div id="footer"></div> </div> </body> </html> PHP-Code:
Code:
@CHARSET "UTF-8"; * { margin: 0; padding: 0; bordern: 0; } body { background: url("Images/bg.png") no-repeat top center black; width:100%; height:100%; min-width:800px; } #content { position: absolute; top:250px; left:10%; width: 80%; min-width: 951px; min-height:200px; background: url("Images/bgc.png") ; } #platzhalter { width:10%; height:1px; position: absolute; right:-13%; } #Logo { width: 500px; height:200px; position: absolute; top: -180px; left: 0px; background-image: url("Images/logo.png"); } #menue { position:absolute; top: -40px; height:36px; width: 100%; color:black; text-decoration: none; } #menue_left { background-image:url("Images/menue_left.png"); height: 36px; width:475px; position: absolute; top:0; left: 0; } #menue_right { background-image:url("Images/menue_right.png"); height: 36px; width:475px; position: absolute; top:0; right: 0; } #menue_middle { background-image: url("Images/menue.png"); width:auto; height:36px; margin: 0 475px; } #menue_text { position: absolute; width: 100%; height:36px; top:0px; vertical-align: middle; text-align: center; line-height: 36px; font-size: 22px; } #menue_text a { margin: 0 20px; height: 36px; } #menue_text a:hover { height:36px; background: url("Images/hover.png") center; } #menue_text a:VISITED { color:black; text-decoration: none; } #menue_text a:LINK { color:black; text-decoration: none; } #footer { background: url("Images/footer.png") no-repeat top center; height: 19px; width: 100%; position: absolute; bottom: -25px; } HTML-Code:
<div class="boxen"> <div class="ueberschrift">Motto</div> <div class= "inhalt">Wir trauen uns auch Farbe zu bekennen!<br/>Freuen sie Sich schon auf unsere Inovativen Werbeideen.</div> </div> <div class="boxen"> <div class="ueberschrift">Veränderungen</div> <div class= "inhalt">Im Jahre 2009 veränderten wir elementar die Strategie unserer Agentur. Die Anforderungen die im Bereich Werbung und Marketing vom Markt gefordert werden, können nicht von einer einzelnen Agentur abgebildet werden. So entstand 2009 ein Netzwerk aus hoch qualifizierten Unternehmen und Partneragenturen um einen festen Agenturkern. Der große Vorteil für unsere Kunden ist das geballte Know-How unseres Agenturnetzwerks, in dem wir in allen Bereichen der Werbung und des Marketings auf höchsten Niveau arbeiten und dies partnerschaftlich. So können wir die komplette Klaviatur der Werbung abbilden, in Premium Qualität, zentral koordiniert mit einem riesigen Innovations- & Kreativpool an Spezialisten. </div> </div ><div class="boxen"> <div class="ueberschrift">Gründung</div> <div class= "inhalt">Das Unternehmen wurde 2006 in Heidenheim in der Region Ostwürttemberg gegründet. Von Anfang an wurde die Werbeagentur in die Bereiche Klassische Medien und Neue Medien segmentiert. Im Jahre 2007 wurde die Agentur durch TV, Radio und Zeitschrifen durch eines der ersten Social- Networkportale in Deutschland bekannt. Dadurch zählt das Unternehmen zu den Pionieren des Netzes. Die Agentur betreut Unternehmen aus dem Bereich StartUps, Personen- und Kapitalgesellschaften, Staatliche Einrichtungen, Verlage und Global Player.</div> </div ><div class="boxen"> <div class="ueberschrift">Leistungen</div> <div class= "inhalt"> Wir spielen für Sie die komplette Klaviatur des Marketings und der Werbung. In unserem Agenturnetzwerk finden Sie die richtigen Unternehmen für Ihre Anforderungen, die zentral koordiniert werden. Stellen Sie jetzt Ihre Anfrage. Unser kompetentes Team beantwortet Ihre Anfrage von Mo. - Fr. von 09:00 bis 18:00 Uhr innerhalb von 2 Stunden. Vielen Dank!</div> </div> Code:
#inhalt { color: white; width:100%; height:100%; } .boxen { width: 21%; height:100%; float: left; margin:5% 1%; background: url("Images/bgc.png"); padding: 1%; } .ueberschrift { font-size: 22px; } .inhalt { font-size: 14px; } Geändert von TheBlackPitcher (02.02.2010 um 16:31 Uhr) |
Sponsored Links |
|
||||
Hi,
alles mit position:absolute in den Viewport zu nageln ist mehr als suboptimal. Nutze besser float/clear regel die Abstände mit padding/margin, dann kannst du für gleichlange Spalten Faux Columns einsetzen. edit. Warum sind die Umlaute maskiert. Mit UTF-8 braucht man das nicht.
__________________
Ein mehrfacher Gruß aus dem Südosten Klaus |
Sponsored Links |
|
|||
re
Ganz ehrlich eigendlich dachte ich auch das ich die Umlaute nicht Maskieren aber mhh iwie hat er mir die Umlaute nicht richtig Angezeigt Danke für den tipp werde das schon lesen . Habe es vorhin schonmal mit float probiert aber iwie kam bei mir dann Schwierigkeiten mit der abhängigen Positionierung wie zb für Rundungen oder Menü im Bezug auf den Content.
|
|
||||
Code:
* { margin: 0; Sinnvoll. padding: 0; Sinnvoll. bordern: 0; Unsinnig. Die korrekte Schreibweise wäre border und ich empfehle dir, das nur für img einzustellen. Sonst erlebst du bei einem Kontaktformular möglicherweise eine Überraschung. } body { background: url("Images/bg.png") no-repeat top center black; width:100%; Unsinnig. body ist immer 100% breit. height:100%; min-width:800px; Unsinnig. Siehe oben. } |
|
|||
Re
Danke für die schnelle Antwort , jedoch wenn ich das Faux Columns Prinzip verstanden habe, müsste ich dann eine feste breite haben, da dieses vertikal gekachelte Bild Element sich ja nicht relativ an eine Größe anpassen kann, oder habe ich da etwas missverstanden?
Geändert von TheBlackPitcher (02.02.2010 um 17:00 Uhr) |
|
|||
Es gibt auch Faux Columns in der Liquid-Variante.
Creating Liquid Faux Columns Interessehalber: Bleibt das eigentlich bei den vier Spalten in einer Reihe, oder kann es auch vorkommen, dass es eine zweite Reihe geben soll/wird? |
|
|||
Die Absicht war das es auch eine 2te Reihe geben soll aber iwie wie berichtet hab ich ja ein Problem mit den boxen.
Das Englisch auf der Seite versteh ich so weit, aber den Lösungsansatz versteh ich net. Mag dran liegen das ich 18 bin und noch zur Schule geh, aber ich denke das ist eine schlechte Entschuldigung |
|
|||
Zitat:
|
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
2 divs nebeneinander | smartexport | CSS | 6 | 16.04.2010 17:22 |
2 DIVs nebeneinander ganzheitlich zentriert | SchlechterInformatiker | CSS | 2 | 12.11.2009 03:29 |
Divs nebeneinander... | Sengi | CSS | 4 | 23.05.2009 09:23 |
divs fließend nebeneinander, der letzte bis zum seitenrand | deelite | CSS | 2 | 17.03.2009 22:04 |
Divs nebeneinander, aber mittig | RomanM | CSS | 2 | 24.10.2007 07:32 |