Log In
Home
September 6, 2002
Offline
Jag håller på med en design med lite runda hörn, för närvarande finns allting bara i photoshop men har tänkt stoppa in det tillsammans med lite kod nu. Så här http://upl.silentwhisper.net/u.....4/test.gif ser min "mainruta" ut. Till vänster har jag tänkt ha länkar och sedan ska sidorna öppnas i mittenrutan.
Mitt krux är att jag vet inte hur jag ska lägga upp detta mha css. Jag vill att mainrutan ska kunna förstoras (även containern som mainrutan ligger i skall förstoras om det blir för mycket text).
Hur löser jag detta på bästa sätt? Jag funderade på att splitta upp mainrutan i tre delar. Först toppen där bara dom runda hörnen ligger (15x485), sedan göra en box med samma bakgrundsfärg och lägga två solid kantlinjer på den. Tillsist lägga in en bottom där dom runda hörnen på botten ligger. Hade allt detta varit "fast" (utan möjlighet att förstoras)hade det ju inte varit några problem att bestämma vart "bottenhörnen" skulle läggas, men eftersom den kommer variera i höjd beroende på hur mycket text som lägs in vet jag inte hur jag ska göra.
Jag hoppas ni förstår mitt problem och att någon novis på css har lust att hjälpa mig, jag har inte allt för mycket kunskap om css :/
*edit* jag tittade lite på ett alternativt sätt med runda hörn på webdesignskolan men det verkar inte som det går att få en border runt hela boxen då :/
December 25, 2000
Offline
Du är på rätt spår om du vill som jag förstod det ha en box som ändrar storlek på höjden. Det du behöver är en övre div med den övre rundade kanten, en i mitten med background-repeat:repeat-y och sedan en nedre box med nedre delen.
September 6, 2002
Offline
ViU wrote: Du är på rätt spår om du vill som jag förstod det ha en box som ändrar storlek på höjden. Det du behöver är en övre div med den övre rundade kanten, en i mitten med background-repeat:repeat-y och sedan en nedre box med nedre delen.
Jo men hur ska jag göra så den nedre diven anpassar sig efter mittendiven? Om jag bestämmer att nedre diven ska vara 300px från toppen kommer den ju stanna där även fast mittendiven blir större.
Går det inte att göra så nedre diven anpassar sig så den alltid börjar där mittendiven slutar?
December 26, 2003
Offline
Jo, genom att inte ange att nedre diven ska vara 300px från toppen...
January 27, 2003
Offline
Det här ska fungera, i Opera, IE och FF
CSS
#container {
position: absolute;
height: 500px;
width:200px;
border: solid #000000 0px;
}
#top {
background-image: url(top.jpg);
background-repeat: no-repeat;
width: 150px;
border: solid #000000 1px;
float: left;
clear: both;
}
#mellan {
background-image: url(mellan.jpg);
background-repeat: repeat-y;
width: 150px;
border: solid #000000 1px;
float: left;
clear: both;
}
#botten {
background-image: url(mellan.jpg);
background-repeat: no-repeat;
width: 150px;
border: solid #000000 1px;
float: left;
}
HTML
<div id="container">
<div id="top">t</div>
<div id="mellan">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sed sem. Cras cursus. Morbi ut arcu. Nullam molestie ante sit amet ligula. Suspendisse dui magna, elementum vitae, porta non, aliquet ac, mauris. Integer eget ante. Fusce risus eros, bibendum sed, blandit id, nonummy eu, purus. Duis sit amet est ac dolor vulputate mattis. Donec vestibulum tincidunt leo. Integer sollicitudin blandit sapien.</div>
<div id="botten">b</div>
</div>
September 6, 2002
Offline
Tack så mycket! Fast jag har lite följdfrågor.
Jag har lagt upp min vänstermenu här http://ubg.nu/css/
Går det inte att göra så den övre diven är kortare än 19px som tycks vara default? Skriver jag height: 10px reagerar den inte och är 19px endå. Bottendiven tycks ju vara kortare än 19px vilket gör mig lite förvirrad.
#container {
position: absolute;
height: 500px;
width:100px;
}
#top {
background-image: url(menu_top2.gif);
background-repeat: no-repeat;
width: 100px;
float: left;
clear: both;
}
#mellan {
background-color: #F8FAF3;
width: 100px;
border-left: solid #000000 1px;
border-right: solid #000000 1px;
border-top:0px;
border-bottom: 0px;
float: left;
clear: both;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
padding:4px;
}
#botten {
background-image: url(menu_bottom.gif);
background-repeat: no-repeat;
width: 100px;
float: left;
}
Så här ser min css ut nu.
Om jag sedan vill lägga mitt "mainwindow" till höger om denna menyraden? Hur lägger jag upp det då? Ökar jag containern till 600px för att både left-diven och main-diven ska få plats ploppar #bottom upp och lägger sig till höger om #top
edit: la jag till clear: both på #bottom och då lade den sig där den skulle, var det något du hade missat eller ska det inte vara så?
Main-diven är 485 bred och ska alltså ligga ca 5px till höger om left-diven.
January 27, 2003
Offline
det här borde väl fungera?
edit: det fungerade fint att göra min #top mindre än 19px hög, jag satte bara bara height: 10px; så fungerade det fint
CSS
#main {
position: absolute;
top: 0px;
left: 105px;
height: vad du nu vill ha;
width: 485px;
osv
osv
}
HTML
<div id="container">
<div id="top">t</div>
<div id="mellan">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sed sem. Cras cursus. Morbi ut arcu. Nullam molestie ante sit amet ligula. Suspendisse dui magna, elementum vitae, porta non, aliquet ac, mauris. Integer eget ante. Fusce risus eros, bibendum sed, blandit id, nonummy eu, purus. Duis sit amet est ac dolor vulputate mattis. Donec vestibulum tincidunt leo. Integer sollicitudin blandit sapien.</div>
<div id="botten">b</div>
</div>
<div id="main">Main</div>
edit: la jag till clear: both på #bottom och då lade den sig där den skulle, var det något du hade missat eller ska det inte vara så?
Jag hade tänkt så att bara själva menybiten skulle vara inuti den containern, därför satte jag inte det på den nedersta =)
September 6, 2002
Offline
Okej nu blev det en jäkla röra! Om du kollar på koden som är nu så känns det rätt för mig. http://ubg.nu/css/index2.html
body{
margin-left: 5px;
margin-top: 0px;
}
#container {
position: absolute;
background-color:gray;
height: 500px;
width:600px;
margin-top:5px;
}
#top {
background-image: url(menu_top.gif);
background-repeat: no-repeat;
width: 100px;
float: left;
clear: both;
}
#mellan {
background-image:url(menu_middle.gif);
background-repeat: repeat-y;
width: 100px;
float: left;
clear: both;
padding-left:5px;
}
#botten {
background-image:url(menu_bottom.gif);
background-repeat: no-repeat;
width: 100px;
float: left;
clear:both;
}
.fonts{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}
#main_top {
position: absolute;
left: 105px;
background-image:url(main_top.gif);
background-repeat: no-repeat;
width: 485px;
}
#main_middle {
position: absolute;
left: 105px;
background-image:url(main_middle.gif);
background-repeat: repeat-y;
width: 485px;
height:200px;
}
#main_bottom{
position:absolute;
left:105px;
background-image:url(main_bottom.gif);
background-repeat: no-repeat;
width: 485px;
}
Jag har gjort i princip på samma sätt som med vänster-diven men main-diven vill inte lägga sig på samma sätt utan allting hamnar på varandra?
January 27, 2003
Offline
Det här ska nog fungera, ändra så det passar dig.
CSS
#meny_container {
position: absolute;
height: 500px;
width:200px;
left: 0px;
top: 0px;
border: solid #000000 0px;
}
#meny_top {
background-image: url(top.jpg);
background-repeat: no-repeat;
width: 100px;
border: solid #000000 1px;
float: left;
clear: both;
}
#meny_mellan {
background-image: url(mellan.jpg);
background-repeat: repeat-y;
width: 100px;
border: solid #000000 1px;
float: left;
clear: both;
}
#meny_botten {
background-image: url(mellan.jpg);
background-repeat: no-repeat;
width: 100px;
border: solid #000000 1px;
float: left;
}
#main_container {
position: absolute;
left: 105px;
top: 0px;
height: 500px;
width:600px;
border-style: none;
}
#main_top {
left: 0px;
background-image:url(main_top.gif);
background-repeat: no-repeat;
width: 485px;
border: solid #000000 1px;
float: left;
clear: both;
}
#main_middle {
left: 0px;
background-image:url(main_middle.gif);
background-repeat: repeat-y;
width: 485px;
border: solid #000000 1px;
float: left;
clear: both;
}
#main_bottom{
left:0px;
background-image:url(main_bottom.gif);
background-repeat: no-repeat;
width: 485px;
border: solid #000000 1px;
float: left;
}
HTML
<div id="container">
<div id="top">t</div>
<div id="mellan">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sed sem. Cras cursus. Morbi ut arcu. Nullam molestie ante sit amet ligula. Suspendisse dui magna, elementum vitae, porta non, aliquet ac, mauris. Integer eget ante. Fusce risus eros, bibendum sed, blandit id, nonummy eu, purus. Duis sit amet est ac dolor vulputate mattis. Donec vestibulum tincidunt leo. Integer sollicitudin blandit sapien. Aliquam accumsan nisl ut leo. Sed sed arcu. Vestibulum ante lacus, hendrerit at, ornare quis, hendrerit vel, lectus. Quisque tempus mattis nisl.</div>
<div id="botten">b</div>
</div>
<DIV id="main_container">
<DIV id="main_top">t</div>
<DIV id="main_middle">m</div>
<DIV id="main_bottom">b</div>
</div>
September 6, 2002
Offline
Tackar så mycket =) Funkar bra nu. Dock är det några steg kvar. Om jag vill lägga båda dessa i en container som skall anpassa sig i höjd och bredd utefter hur stora de andra div-containrarna har blivit.
Om jag nu skapar en container runt båda dessa och låter bli att sätta höjden t.ex. låter den bli att skapa diven. För att den ska visa sig måste jag sätta både höjd och bredd, men jag vill ju att den ska anpassa sig efter de andra containrarnas storlekar.
Du kan ju testa att ta bort height:550px och se att hela den diven försvinner. Borde den inte bli lika lång som den längsta diven som den innehåller?
Nu har jag bara satt lite symboliska färger för att se vart divarna håller hus.
#container{
position:absolute;
left:10px;
top:10px;
width:600px;
height:550px;
background-color:#FF99FF;
}
#menu_container {
position: absolute;
top:5px;
left:5px;
background-color:blue;
width:100px;
}
#menu_top {
background-image: url(menu_top.gif);
background-repeat: no-repeat;
width: 100px;
float: left;
clear: both;
}
#menu_middle {
background-image:url(menu_middle.gif);
background-repeat: repeat-y;
width: 100px;
float: left;
clear: both;
padding-left:5px;
}
#menu_bottom {
background-image:url(menu_bottom.gif);
background-repeat: no-repeat;
width: 100px;
float: left;
clear:both;
}
.fonts{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}
#main_container {
position: absolute;
left: 110px;
top:5px;
background-color:gray;
width:485px;
}
#main_top {
left:0px;
background-image:url(main_top.gif);
background-repeat: no-repeat;
width: 485px;
float: left;
clear: both;
}
#main_middle {
left:0px;
background-image:url(main_middle.gif);
background-repeat: repeat-y;
width: 485px;
float: left;
clear: both;
padding-left:5px;
}
#main_bottom{
left:0px;
background-image:url(main_bottom.gif);
background-repeat: no-repeat;
width: 485px;
float: left;
clear: both;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<link href="style2.css" rel="stylesheet" type="text/css">
<div id="container">
<div id="menu_container">
<div id="menu_top"><span class="fonts"> </span></div>
<div id="menu_middle"><span class="fonts">
Om Oss
Kontakt
Blandat
Bilder
Kontakt
Blandat
Kontakt
Blandat
Kontakt
Blandat
</span></div>
<div id="menu_bottom"> </div>
</div>
<div id="main_container">
<div id="main_top"><span class="fonts"> </span></div>
<div id="main_middle"><span class="fonts">bla bla blabla bla bla
bla bla bla
bla bla bla
bla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla bla
bla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla bla
bla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla bla
bla bla blabla bla blabla bla blabla bla blabla bla bla
bla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla bla
bla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla bla
bla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla bla
bla bla blabla bla blabla bla blabla bla blabla bla bla
bla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla bla
bla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla bla
bla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla bla
bla bla blabla bla blabla bla blabla bla blabla bla bla
bla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla bla
bla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla bla
bla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla bla
bla bla blabla bla blabla bla blabla bla blabla bla bla
bla bla blabla bla blabla bla bla</span></div>
<div id="main_bottom"> </div>
</div>
</div>
January 27, 2003
Offline
hm, jag vet att jag fick till precis det som du vill ha en gång, men jag minns inte riktigt hur jag gjorde faktiskt.
en yttersta nödlösning skulle väl vara att sätta en tabell runt hela allt med bara en rad och cell, för jag minns inte hur man gör det du vill ha med css
någon annan här kanske vet?
September 6, 2002
Offline
Okej nu börjar det likna någonting, i IE åtminstone. Dock är main_bottom ute på vift och vill inte ligga där den ska. I firefox syns inte den översta diven där "Meny" och "Startsida" står.
Är detta något du vet hur man ordnar? Många containers och divar blir det!
January 27, 2003
Offline
flytta
så det ser ut så här:
</span>
</div>
<div id="main_bottom"></div>
</div>
istället för:
</span>
</div>
</div>
<div id="main_bottom"></div>
tror det ska fungera
September 6, 2002
Offline
Great! Då återstår bara två problem. Varför inte "meny"&"Startsida"-baren inte visas i firefox, och sedan varför inte containers anpassar sig i höjd efter innehållet i dom.
January 27, 2003
Offline
du måste sätta Height: till något på #menu_bild, ta lika högt som bilden är
September 6, 2002
Offline
Etheral wrote: du måste sätta Height: till något på #menu_bild, ta lika högt som bilden är
Va? Nu hängde jag inte riktigt med
January 27, 2003
Offline
alltså, du har ju en bit i din css som ser ut så här:
#menu_bild{
position:absolute;
background-image: url(menytext.gif);
background-repeat: no-repeat;
left:5px;
top:5px;
width:590px;
}
i den så saknas det en
Height: (den höjd på diven du vill ha);
ex.
#menu_bild{
position:absolute;
background-image: url(menytext.gif);
background-repeat: no-repeat;
left:5px;
top:5px;
width:590px;
height: 20px;
}
Som den är nu så är den 1px hög eller liknande, och p.g.a det så syns inte bilden.
September 6, 2002
Offline
Såja nu börjar det likna något! En liten grej bara, varför måste jag lägga någon text (  i detta fall) i top-divarna för att den ska förstå att det
är den höjden jag har angett som ska användas? Tar jag bort
och
får jag först en grå ruta bakom min menytext.gif
och sedan
blir diven större än jag har angett, får en vit rand under den. Dessa saker gäller dock bara i IE. Detta gäller även bara på mina top-divar, de som ligger som bottom kräver inte detta för att fungera i IE
January 27, 2003
Offline
kan du lägga upp en sida som visar det felet?
September 6, 2002
Offline
Jag tog även bort
<div id="main_top">
<span class="smatt"></span></div>
http://ubg.nu/css/fel/index.html
Detta problemet finns bara i IE. Istället för att få en höjden jag har angett tar den 16px vilket är default för en div utan innehåll och satt höjd (om jag inte säger fel)
2 Guest(s)
