HTML Hauptteil an Bannerbreite anpassen

VampireJB

Newbie
Registriert
Aug. 2008
Beiträge
3
Hallo!

Ich möchte eine Homepage bauen, auf welcher sich ein zentrierter Banner befindet unter welchem sich der Test befinden soll. Dieser soll dabei innerhalb der Grenzen der Bannerbreite befinden. Ich habe das Ganze hier mal mit Tabellen realisiert, jedoch möchte ich statt der Tabellen lieber <div> verwenden. Leider sind bisher alle meine Versuche fehlgechlagen.:( Habt ihr eine Lösung? :freak:

<table align="center" style="border: solid 1px;width: 600px; text-align: center">
<tr><td><i>Banner mit Breite 600px</i></td></tr>
<tr><td>Hier entstehen weitere Div-Ebenen mit maximal der Bannerbreite. Wenn der Text länger ist, so soll er umgebrochen werden.</td></tr>
</table>

gruß
divnoob
 
Um ein Div Mittig auszurichten, musst du dem Body 100% Breite geben und dem div margin: 0 auto zuweisen.
Wenn das nicht klappt such mal im Forum. Dazu gibt es schon massig Threads.
 
Ich kapiers nicht ganz aber sieso nicht einfach
Code:
<div style="border: solid 1px;width: 600px; text-align: center"><img BANNER><br>Text</div>
 
So würde ich es au lösen :

Eine Tabelle um deine ganze HP machen, dadurch erreichst du, dass sie von der Breite her immer gleich ist und alles was du drin machst, auch drin bleibt. Hat Vorteile bei verschiedenen Auflösungen und ist mit den meisten Browsern kompatibel :

HTML:
<table align="center" witdh="600">
	<tr>
		<td>
<table align="center" style="border: solid 1px;width: 600px; text-align: center">
<tr><td><i>Banner mit Breite 600px</i></td></tr>
<tr><td>Hier entstehen weitere Div-Ebenen mit maximal der Bannerbreite. Wenn der Text länger ist, so soll er umgebrochen werden.
	TestTestTestTestTestTestTestTestTestTestTestTestTestTestTest
TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest
TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</td></tr>
</table>
		</td>
	</tr>
</table>
 
@AMK7300: Der TE hat doch schon extra geschrieben das er keine Tabellen verweden möchte.
Zudem sind auch divs zu jeder Auflösung kompatible.
 
HTML:
#container {
width:xxxpx;
margin:0px 0px;
background-color:#FFFFFF;
border:0px solid #000000;
float:none;
padding-bottom:3em;
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
margin-left: auto; 

}

#content {
margin:0px 0px;
border:0px solid #FFFFFF;
background-color:#FFFFFF;
width:xxxpx;
float:none;
padding:0px;
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
margin-left: auto; 

}

#header {
border:0px;
margin:0px 0px;
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
margin-left: auto; 
	float:none;
	padding:0px;
	height: xxxpx;
	width: xxxpx;

}

Aufbau:
[Container ->header->content]

HTML:
<div id="container"> -->Kompletter Inhalt!
<div id="header"><img src="ordner/bild.png" \></div>
<div id="content">Hier dein Seiten Inhalt</div>

<!-- Dein Haubtcontainer wieder schließen! -->

</div>
[container]
width=xxxpx muss natürlich noch auf deine gewünschte Größe angepasst werden!

[content]
width=xxxpx würde ich paar "px" kleiner machen als den container.

[header]
width=xxxpx -->Breite deines logos wenn voll Größe dann container-px = header -px
height: xxxpx; <- -> Die höhe deines Logos!

bg-color kannste natürlich frei wählen.

Wenn du Photoshop hast, kannste dir die Farbcodes da rauskopieren ;)
Wenn nicht folgender Link wäre dann von interesse:
http://www.html-php-mysql.de/generatoren/colors.php

Hexcodes müssen immer mit # anfangen.

Hoffe das ist das was du dir vorgestellt hast!

lg
 
Zuletzt bearbeitet:
Zurück
Oben