| Autor |
Nachricht |
KobraPatron
Threadersteller
Dabei seit: 09.01.2011
Ort: Nürnberg
Alter: 43
Geschlecht: 
|
Verfasst So 09.01.2011 14:47
Titel CSS Layout zentrieren |
  |
|
Hallo Zusammen,
ich bin gerade dabei mir CSS anzueignen. Ich habe mir auch die Grundlagen reingezogen, aber dennoch habe ich gewisse Schwierigkeiten.
Ich habe mir ein Layout in Photoshop angelegt und wollte die Grafik - nach dem Slicen - mit div's als Hinterfrund anlegen. Ich habe diverses bereits ausprobiert. Kann mir jemand bitte den Befehl dafür nennen?
Ferner habe ich noch das Problem, dass ich das Gesamtlayout nicht zentrieren kann. Ich habe den ersten DIV genommen und sämtliche Befehle/ Funktionen/ Syntax ausprobiert, aber es wird einfach nicht mittig.
Den Code bzw. die hml-Seite habe ich bereits - vor Frust - entfernt und kann daher den Code hier nicht reinstellen.
Über jede Hilfe bin ich unendlich dankbar.
|
|
| |
  |
 |
CanTK
Dabei seit: 23.02.2010
Ort: -
Alter: -
Geschlecht: -
|
Verfasst So 09.01.2011 15:34
Titel
|
|
|
Du musst deine DIV's verschachteln. Drumrum legst du einen "Wrap" der die anderen Elemente umhüllt. diesem gibst du die Breite deiner seite und margin:0 auto;
#wrap {
width:960px;
margin:0 auto;
}
In den machst du nun all deinen Content rein. Wichtig ist das du nicht ABSOLUT Positionierst sondern vom Boxmodell ausgehst und verschachtelst.
Gruß Can
|
|
| |
|
|
|
Anzeige
|
|
|
KobraPatron
Threadersteller
Dabei seit: 09.01.2011
Ort: Nürnberg
Alter: 43
Geschlecht:
|
Verfasst So 09.01.2011 16:11
Titel
|
|
|
| CanTK hat geschrieben: | Du musst deine DIV's verschachteln. Drumrum legst du einen "Wrap" der die anderen Elemente umhüllt. diesem gibst du die Breite deiner seite und margin:0 auto;
#wrap {
width:960px;
margin:0 auto;
}
In den machst du nun all deinen Content rein. Wichtig ist das du nicht ABSOLUT Positionierst sondern vom Boxmodell ausgehst und verschachtelst.
Gruß Can |
Danke für die schnelle Antwort.
Ich habe jetzt mal schnell eine Datei angelegt.
Teil aus dem html-code:
<div id="Tabelle_01">
<div id="index1-02_"></div>
<div id="index1-03_">
<img id="index1_03" src="index/index1_03.jpg" width="445" height="108" alt="" />
</div>
<div id="index1-04_"></div>
<div id="index1-05_">
<img id="index1_05" src="index/index1_05.jpg" width="49" height="315" alt="" />
</div>
</div>
und habe in der zentralen CSS-Datei folgendes gemacht:
#Tabelle_01 {
position:relativ;
left:0px;
top:0px;
width:796px;
height:auto;
}
#index1-01_ {
position:absolute;
left:0px;
top:0px;
width:796px;
height:20px;
}
#index1-02_ {
position:absolute;
left:0px;
top:20px;
width:192px;
height:89px;
}
#index1-03_ {
position:absolute;
left:192px;
top:20px;
width:445px;
height:108px;
}
#index1-04_ {
position:absolute;
left:637px;
top:20px;
width:159px;
height:141px;
}
#index1-05_ {
position:absolute;
left:0px;
top:109px;
width:49px;
height:315px;
}
ich habe gerade einiges versucht, aber irgendwie gehts nicht. Kannst du mir bitte sagen, was ich falsch mache??
|
|
| |
|
|
Nothingness
Dabei seit: 20.03.2007
Ort: -
Alter: 35
Geschlecht: 
|
Verfasst So 09.01.2011 17:28
Titel
|
|
|
|
In deinem gezeigten Code hast du aber noch nicht das gemacht, was dir CanTK geraten hat.
|
|
| |
|
|
DaMiGGe
Dabei seit: 30.09.2008
Ort: Schwerin
Alter: 35
Geschlecht:
|
Verfasst So 09.01.2011 17:41
Titel
|
|
|
es gibt noch eine andere variante, die ist aber böse und hässlich, aber vllt reicht es für deine zwecke.
und zwar machst du in deinem html code direkt in den body einen center-tag
das sieht dann so aus
<html>
<head></head>
<body>
<center>
... deine inhalts-divs ...
</center>
</body
</html>
|
|
| |
 |
|
KobraPatron
Threadersteller
Dabei seit: 09.01.2011
Ort: Nürnberg
Alter: 43
Geschlecht:
|
Verfasst So 09.01.2011 19:21
Titel
|
|
|
| DaMiGGe hat geschrieben: | es gibt noch eine andere variante, die ist aber böse und hässlich, aber vllt reicht es für deine zwecke.
und zwar machst du in deinem html code direkt in den body einen center-tag
das sieht dann so aus
<html>
<head></head>
<body>
<center>
... deine inhalts-divs ...
</center>
</body
</html> |
Diese Variante hat leider nicht funktioniert...
|
|
| |
|
|
KobraPatron
Threadersteller
Dabei seit: 09.01.2011
Ort: Nürnberg
Alter: 43
Geschlecht:
|
Verfasst So 09.01.2011 19:25
Titel
|
|
|
| Nothingness hat geschrieben: | | In deinem gezeigten Code hast du aber noch nicht das gemacht, was dir CanTK geraten hat. |
so hat auch nicht funktioniert:
<div id="wrap">
<div id="Tabelle_01">
<div id="index1-02_"></div>
<div id="index1-03_">
<img id="index1_03" src="index/index1_03.jpg" width="445" height="108" alt="" />
</div>
<div id="index1-04_"></div>
<div id="index1-05_">
<img id="index1_05" src="index/index1_05.jpg" width="49" height="315" alt="" />
</div>
</div>
</div>
und habe in der zentralen CSS-Datei folgendes gemacht:
#wrap {
width:960px;
margin:0 auto;
}
#Tabelle_01 {
position:relativ;
left:0px;
top:0px;
width:796px;
height:auto;
}
#index1-01_ {
position:absolute;
left:0px;
top:0px;
width:796px;
height:20px;
}
#index1-02_ {
position:absolute;
left:0px;
top:20px;
width:192px;
height:89px;
}
#index1-03_ {
position:absolute;
left:192px;
top:20px;
width:445px;
height:108px;
}
#index1-04_ {
position:absolute;
left:637px;
top:20px;
width:159px;
height:141px;
}
#index1-05_ {
position:absolute;
left:0px;
top:109px;
width:49px;
height:315px;
}
|
|
| |
|
|
Smooth-Graphics
Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht:
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
[CSS] Layout zentrieren - Weg von den Frames ?
Übergroßes Layout mit mehreren Layern Divs zentrieren
Website mit festen Layout in dynamisches Layout umbauen
[CSS Layout] An Fenstergröße anpassendes Layout
[CSS] Div zentrieren
css div zentrieren
|
|
Willkommen auf dem Portal für Mediengestalter
