zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Div's nebeneinander gleich groß

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 02.02.2010, 16:28
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.02.2010
Beiträge: 12
TheBlackPitcher befindet sich auf einem aufstrebenden Ast
Ausrufezeichen 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">&Uuml;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 Seite dazu fürs Verständnis
PHP-Code:
<?php
 
if ( isset ($_GET ['site']))
 {
    switch (
$_GET ['site'])
    {
        case 
"startseite":
            
$template file_get_contents('Index.html');
            
$template str_replace('<!-- css -->','<link rel="stylesheet" type="text/css" href="startseite.css" />',$template);
            
$inhalt file_get_contents('startseite.html');
            
$template str_replace('<!-- inhalt -->',$inhalt,$template);
            echo 
$template;
            break;
        default:
            
$template file_get_contents('Index.html');
            
$template str_replace('<!-- css -->','<link rel="stylesheet" type="text/css" href="startseite.css" />',$template);
            
$inhalt file_get_contents('baustelle.html');
            
$template str_replace('<!-- inhalt -->',$inhalt,$template);
            echo 
$template;
            break;
    }
 }
 else
 {
     
header("Location: index.php?site=startseite");
 }
?>
Basis CSS Datei
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;
}
einzusetzende Seite startseite.html
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&auml;nderungen</div>
<div class= "inhalt">Im Jahre 2009 ver&auml;nderten wir elementar die
Strategie unserer Agentur. Die Anforderungen
die im Bereich Werbung und Marketing vom Markt
gefordert werden, k&ouml;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&szlig;e Vorteil f&uuml;r unsere Kunden ist das
geballte Know-How unseres Agenturnetzwerks,
in dem wir in allen Bereichen der Werbung und
des Marketings auf h&ouml;chsten Niveau arbeiten
und dies partnerschaftlich.

So k&ouml;nnen wir die komplette Klaviatur der Werbung
abbilden, in Premium Qualit&auml;t, zentral koordiniert
mit einem riesigen Innovations- & Kreativpool an
Spezialisten. </div>
</div
><div class="boxen">
<div class="ueberschrift">Gr&uuml;ndung</div>
<div class= "inhalt">Das Unternehmen wurde 2006 in Heidenheim in der
Region Ostw&uuml;rttemberg gegr&uuml;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&auml;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&uuml;r Sie die komplette Klaviatur des Marketings und der Werbung. In unserem Agenturnetzwerk finden Sie die richtigen Unternehmen f&uuml;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>
CSS code zu der ein zu setzenden Datei
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;
}
Die Webseite zum Bild von machen seht ihr hier XHTMLforum - Ein Forum für XHTML und CSS

Geändert von TheBlackPitcher (02.02.2010 um 16:31 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 02.02.2010, 16:37
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 02.02.2010, 16:47
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.02.2010
Beiträge: 12
TheBlackPitcher befindet sich auf einem aufstrebenden Ast
Standard 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.
Mit Zitat antworten
  #4 (permalink)  
Alt 02.02.2010, 16:53
Benutzerbild von Cocoon
position: relative;
XHTMLforum-Mitglied
 
Registriert seit: 12.06.2009
Ort: Berlin
Beiträge: 156
Cocoon wird schon bald berühmt werden
Standard

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.
}
Little Boxes - Webseiten gestalten mit HTML und CSS
Mit Zitat antworten
  #5 (permalink)  
Alt 02.02.2010, 16:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.02.2010
Beiträge: 12
TheBlackPitcher befindet sich auf einem aufstrebenden Ast
Standard 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)
Mit Zitat antworten
  #6 (permalink)  
Alt 02.02.2010, 17:06
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.220
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

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?
Mit Zitat antworten
  #7 (permalink)  
Alt 02.02.2010, 17:39
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.02.2010
Beiträge: 12
TheBlackPitcher befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #8 (permalink)  
Alt 02.02.2010, 17:45
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.02.2010
Beiträge: 12
TheBlackPitcher befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von TheBlackPitcher Beitrag anzeigen
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
Edit: ich habe das jetzt mal angelesen und wenn ich mir das mal so ansehe gilt diese Lösung aber auch wiederum nur für 2 Divs und auch nur wenn die direkt nebeneinander sind.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:03 Uhr.