Divar i divar, problem med position

Hej :)

Sitter och håller på lite med en meny i CSS och kom på ett problem som jag inte kunde hitta lösningen på. Om ni kollar i den bifogade filen ser ni att menyn är rundad på vänstra sidan, inget problem med det, det var bara att stoppa in en DIV i huvuddiven och sedan en bild som rundar hörnen. Men när jag ska lägga in en bild för den högra sidan så går det inte att få en DIV att placera sig på den högra sidan av huvuddiven. Vilken kod ska jag använda? Om jag använder absolut så placerar sig inte diven så som det ser ut i dreamweaver i webbläsaren... Säg inte att jag ska göra en bild i photoshop som har rundade hörn, för det är inte det som är intressant i denna tråden ;)

Tack :)
Anton

varför inte en bakgrundsbild för hela menydiven och skippa absolut positionerade bilder...
dreamweavers absoluta positioneringar stämmer sällan

Anton_L skrev:

Hej :)

Sitter och håller på lite med en meny i CSS och kom på ett problem som jag inte kunde hitta lösningen på. Om ni kollar i den bifogade filen ser ni att menyn är rundad på vänstra sidan, inget problem med det, det var bara att stoppa in en DIV i huvuddiven och sedan en bild som rundar hörnen. Men när jag ska lägga in en bild för den högra sidan så går det inte att få en DIV att placera sig på den högra sidan av huvuddiven. Vilken kod ska jag använda? Om jag använder absolut så placerar sig inte diven så som det ser ut i dreamweaver i webbläsaren... Säg inte att jag ska göra en bild i photoshop som har rundade hörn, för det är inte det som är intressant i denna tråden ;)

Tack :)
Anton

Dom jag sett har löst dilemmat på enklast tänkbara sätt. Tar väl tre minuter och funkar rakt av i alla läsare, validerar osv. Men ska man använda sig av deras trick så får man inte börja yla om att "tabeller är inte tänkta att användas för layout" utan vara lite mer praktiskt lagd.

Det är bara att lägga in en tabell med en rad och tre celler. Den vänstra och högra cellen får var sin bild med rundade hörn och fixed width. Mittencellen får en bild som bakgrund, repeat-x. Sen kan man lägga in vad man vill som meny, t.ex. en lista...

Vill man använda divvar, så antar jag att det måste gå att göra ungefär samma sak. Tre divvar, t.ex. float:left så dom hamnar bredvid varandra. Den högra och vänstra får varsin blupp med rundade hörn. Den i mitten får en bakgrund repeat-x. Åsså en lista som meny i densamma. Slutligen en div som omsluter alla de där tre divvarna.

Typ....

Tack tack, låter som ett fint förslag. Det känns på något vis som att tables är lättare och snabbare än CSS, men den har såklart vissa begränsningar...

- curvycorners.net

eller

- png/gif

eller nåt sånt här

<div class=bottomdiv>
  <div class=left></div>
  <div class=right></div>
</div>

.bottomdiv {
  clear:both;
  float:left;
  width:200px;
}
.bottomdiv .left,
.bottomdiv .right {
  width:10px;
  height:10px;
}
.bottomdiv .left {
  float:left;
  background:url(left.png);
}
.bottomdiv .right {
  float:right;
  background:url(right.png);
}

det lär väl inte funka hundra så du får sitta och pilla lite. det välkända IE-felet kan avbuggas med hjälp av display:inline; eller overflow:none;, exempelvis.