simples css problem^^

ipulf · 25.07.10, 03:38

Hallöle!

ich hab vor ein paar tagen mit html und css angefangen und bin auf ein problem gestoßen

und zwar will ich 2 div container neben einander haben ^^ allerdings solllen sie zentriert bleiben hier die codes:

- html -
[HTML]<div class="sidebar">

</div>
<div class="main">

</div>[/HTML]

- css -

Code:

.sidebar {
	background-image:url(images/Bilder/Style_07.png);
	background-repeat:no-repeat;
	height: 1097px;
	width: 267px;
}

.main {
	background-image:url(images/Bilder/Style_08.png);
	background-repeat:no-repeat;
	margin-left:auto;
	margin-right:auto;
	height: 1097px;
	width: 733px;
}

wäre cool wenn ihr mir helfen könntet ^^

mfg ipulf

edit: es darf kein abstand zwischen den beiden containern sein^^

testerws · 25.07.10, 12:52

pack doch die beiden container in 1 container, diesen platzierst du dann mittig, falls das funktioniert dann kannst du evtl. den einen container links, den anderen rechts alignen... ka ob das jetzt so funktioniert aber ich hätte es auf diese weise probiert

ipulf · 25.07.10, 12:56

Zitat:

Zitat von testerws

pack doch die beiden container in 1 container, diesen platzierst du dann mittig, falls das funktioniert dann kannst du evtl. den einen container links, den anderen rechts alignen... ka ob das jetzt so funktioniert aber ich hätte es auf diese weise probiert

funktioniert leider nicht :S

ipulf · 25.07.10, 13:50

mittler weile hab ich die nach rechts und nach links ausgerichtet so das die perfect neben einander passen würden aber trotzdem sind sie noch untereinander..

testerws · 25.07.10, 13:52

dann hast du es nicht richtig probiert

Code:

<html>
<head>
</head>
<body>
<div id="main" style="width:300px; height:32px;" >
	<div id="1"  style="width:150px; height:35px; background-color:#f00;"/>
	<div id="2"  style="margin-left:150px; width:150px; height:35px; background-color:#0f0;"/>
</div>
</body>
</html>

hat bei mir funktioniert, jetzt muss man nur das main div positionieren, da ich aber lange nichts mehr mit html styles gemacht habe weiss ich nicht wie man die position mittig ausrichtet, aber ich denke dass selfhtml helfen wird

urga · 25.07.10, 14:21

wie wärs mit einer tabelle und border=0 in die du die divs packst. und dann die tabelle positionieren...

Magicstar · 25.07.10, 14:43

gib den beiden divs einfach nen float moddel mit.
die linke box nen float: left und der rechten nen float: right

darunter setzt du dann folgendes:
<div style="clear: both; font-size: 1px; line-hight: 1px;> </div>

ipulf · 25.07.10, 18:05

Zitat:

Zitat von Magicstar

gib den beiden divs einfach nen float moddel mit.
die linke box nen float: left und der rechten nen float: right

darunter setzt du dann folgendes:
<div style="clear: both; font-size: 1px; line-hight: 1px;> </div>

vielen dank brauchte nur den float ^^

Magicstar · 25.07.10, 18:11

vergiss das:
<div style="clear: both; font-size: 1px; line-hight: 1px;> </div>

nicht.
sonst verzieht sich die seite, weil der code "denkt", das das float immernoch gillt

ipulf · 25.07.10, 19:20

Zitat:

Zitat von Magicstar

vergiss das:
<div style="clear: both; font-size: 1px; line-hight: 1px;> </div>

nicht.
sonst verzieht sich die seite, weil der code "denkt", das das float immernoch gillt

jo danke^^

bei mir hat sich allerdings mitlerweile das nächste problem angestaut ^^

undzwar bei meiner navigation die icons haben einen abstand von einander was nicht sein soll mit border=0 funkt es nicht hier die codes:

[HTML]<div class="navi">
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Bild1','','images/Bilder/style_hover_02.png',1)"><img src="images/Bilder/Style_02.png" name="Bild1" border="0" id="Bild1" /></a>
</tr>
<tr>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Bild2','','images/Bilder/style_hover_03.png',1)"><img src="images/Bilder/Style_03.png" name="Bild2" border="0" id="Bild2" /></a>
</tr>
<tr>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Bild3','','images/Bilder/style_hover_04.png',1)"><img src="images/Bilder/Style_04.png" name="Bild3" border="0" id="Bild3" /></a>
</tr>
<tr>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Bild4','','images/Bilder/style_hover_05.png',1)"><img src="images/Bilder/Style_05.png" name="Bild4" border="0" id="Bild4" /></a>
</tr>
<tr>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Bild5','','images/Bilder/style_hover_06.png',1)"><img src="images/Bilder/Style_06.png" name="Bild5" border="0" id="Bild5" /></a>
</tr>
</table></div>[/HTML]

-css-

Code:

.navi {
	margin-left:auto;
	margin-right:auto;
	height: 58px;
	width: 1000px;	
}

Magicstar · 25.07.10, 19:34

nimm die icons mal aus der tabelle raus, und geb denen nen float mit.
tabellen sind nicht barrierefrei und führen immer zu problemen.
einfach nen float im style-tag mit anhängen (float:left)

btw. wieso machste den hover eigendlich mit js und nicht mit css?

ipulf · 25.07.10, 19:42

Zitat:

Zitat von Magicstar

nimm die icons mal aus der tabelle raus, und geb denen nen float mit.
tabellen sind nicht barrierefrei und führen immer zu problemen.
einfach nen float im style-tag mit anhängen (float:left)

btw. wieso machste den hover eigendlich mit js und nicht mit css?

kp hab im dreamweaver oben einfügen rolloverbild und dann die links eingefügt^^

aaalsooo.. wenn ich jetz float: left mache dann haut der mir alles durcheinander denke mal weegen dem code den du mir gegeben hast damit grade das nicht passiert den konnte ich aber net rein machen weil sonst mein footer verschwindet x_x

Magicstar · 25.07.10, 19:50

setz mal um jeden link folgendes rum <div style="float:left;">a-tag und img dingens</div>
und nach den icons packst du mal folgendes:
(das sorgt dafür, das der footer wiederkommt)
<div style="clear: both; line-height: 1px; font-size: 1px;"> </div>

hier mal komplett:
[HTML]
<div class="navi">
<div style="float: left;">
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Bild1','','images/Bilder/style_hover_02.png',1)"><img src="images/Bilder/Style_02.png" name="Bild1" border="0" id="Bild1" /></a></div>
<div style="float: left;">
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Bild2','','images/Bilder/style_hover_03.png',1)"><img src="images/Bilder/Style_03.png" name="Bild2" border="0" id="Bild2" /></a></div>
<div style="float: left;">
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Bild3','','images/Bilder/style_hover_04.png',1)"><img src="images/Bilder/Style_04.png" name="Bild3" border="0" id="Bild3" /></a></div>
<div style="float: left;">
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Bild4','','images/Bilder/style_hover_05.png',1)"><img src="images/Bilder/Style_05.png" name="Bild4" border="0" id="Bild4" /></a></div>
<div style="float: left;">
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Bild5','','images/Bilder/style_hover_06.png',1)"><img src="images/Bilder/Style_06.png" name="Bild5" border="0" id="Bild5" /></a>
</div> </div>
<div style="clear: both; line-height: 1px; font-size: 1px;"> </div>
[/HTML]

ipulf · 25.07.10, 19:54

Zitat:

Zitat von Magicstar

setz mal um jeden link folgendes rum <div style="float:left;">a-tag und img dingens</div>
und nach den icons packst du mal folgendes:
(das sorgt dafür, das der footer wiederkommt)
<div style="clear: both; line-height: 1px; font-size: 1px;"> </div>

hier mal komplett:
[HTML]
<div class="navi">
<div style="float: left;">
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Bild1','','images/Bilder/style_hover_02.png',1)"><img src="images/Bilder/Style_02.png" name="Bild1" border="0" id="Bild1" /></a></div>
<div style="float: left;">
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Bild2','','images/Bilder/style_hover_03.png',1)"><img src="images/Bilder/Style_03.png" name="Bild2" border="0" id="Bild2" /></a></div>
<div style="float: left;">
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Bild3','','images/Bilder/style_hover_04.png',1)"><img src="images/Bilder/Style_04.png" name="Bild3" border="0" id="Bild3" /></a></div>
<div style="float: left;">
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Bild4','','images/Bilder/style_hover_05.png',1)"><img src="images/Bilder/Style_05.png" name="Bild4" border="0" id="Bild4" /></a></div>
<div style="float: left;">
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Bild5','','images/Bilder/style_hover_06.png',1)"><img src="images/Bilder/Style_06.png" name="Bild5" border="0" id="Bild5" /></a>
</div> </div>
<div style="clear: both; line-height: 1px; font-size: 1px;"> </div>
[/HTML]

hallelulja! xD ichdanke dir sehr! dafür kriegsu für jeden post ein thx xD

wäre nett wenn du den theard mal abbonieren könntest falls ich dich nochmal brauche :3

Magicstar · 25.07.10, 19:57

kein ding, abboniere ich.

iom notfall kannst du mir auch ne pn schreiben

ipulf · 25.07.10, 20:06

Zitat:

Zitat von Magicstar

kein ding, abboniere ich.

iom notfall kannst du mir auch ne pn schreiben

vielen dank^^