Plasseringsproblem i CSS

Rupal · 21. juni 2006

Skal lage en ny hjemmeside som er mer basert på CSS en før, og trenger derfor litt hjelp.

Har brukt en tabell og deretter brukt css for å definere hvor ting skal ligge. Så tenkte jeg at jeg vil ha et "nyhet/hovedvindu" der nyhter o.l skal ligge. Layouten blir som en annen tråd jeg leste her:

en annen tråd

Jeg har altså definert bilde og meny delen, men sliter med hvordan jeg skal klare å plassere det akkurat der jeg vil ha, uten at vinduet "flytter seg ut" av rammene. Prøvde med absolute osv., men dersom jeg krympet nettleservinduet, så ble nyhetvinduet forskjøvet osv. mens resten av siden holdt seg som det skulle..

Koden på sida:

<body>

 <table align="center">
 <tr>

   <td class="banner" height="150" width="800"> </td>
 </tr>
 
 <tr>
 	<td class="spacing"> </td>
 </tr>

  <tr>
 	<td class="main">
<p><%@include file="meny.jsp"%></p>
 </tr>
 <tr>
 <td class="copyright">Copyright © </td>
 </tr>

</table>


</body>

Kode fra css:


body { 
background-color:#b49055

}

table{
z-index:1;
}
td.banner{
background-image:url(images/Banner/banner1.jpg);
border-color:#000000;
border: 2px solid;
position:relative

}

td.main{
border:2px solid;
background: #d5cb86;
border-color:#000000;
max-height:600px
}

td.spacing{
}

td.copyright{
font:Verdana, Arial, Helvetica, sans-serif;
text-align:center;
text-shadow:#993300;
font-size:11px;
background: #b49055
}

<p><%@include file="meny.jsp"%></p> ----> dette er jsp syntaks som vil inkludere en meny som er definert på en annen side.

Så spørsmålet er hvordan kan jeg få plassert nyhetsvinduet uten at den flytter seg, og holder seg i riktig i forhold til resten av siden..

I tillegg, er det mulig å få til samme layout uten bruk av tabell på en enkel måte?Har sett at flere bruker DIV, men er ikke sikker på åssen det blir.Skal prøve selv i mellomtida..

21. juni 2006

Bruk DIV. Mye enklere, rydigere og bedre enn table.

HTML kode for div:

</div>

CSS-fil:

#header {

}

Rupal · 21. juni 2006

Ok, jeg skal prøve på det, men finnes det noen enkle løsninger for hovedspørsmålet mitt?

hockey500 · 21. juni 2006

for å lage det du prøvde på i tables:

<table>
  <tr>
     <td colspan="2">header</td>
  </tr>
  <tr>
     <td>left</td>
     <td>right</td>
  </tr>
  <tr>
     <td colspan="2">footer</td>
  </tr>
</table>

Rupal · 21. juni 2006

for å lage det du prøvde på i tables:

<table>
  <tr>
     <td colspan="2">header</td>
  </tr>
  <tr>
     <td>left</td>
     <td>right</td>
  </tr>
  <tr>
     <td colspan="2">footer</td>
  </tr>
</table>

6352313[/snapback]

Ja det der bør funke med tables-layouten.. Får se om jeg skal bruke det eller div-tags som ble nevnt før...

Takk for hjelpen! :thumbup:

Endret 21. juni 2006 av LBoN

hockey500 · 21. juni 2006

Men du bør fortsatt lære deg å bruke divs istedenfor tables, folka her på forumet er temmelig opptatt av akkurat dette...

Rupal · 21. juni 2006

Men du bør fortsatt lære deg å bruke divs istedenfor tables, folka her på forumet er temmelig opptatt av akkurat dette...

6352721[/snapback]

Hehe, ja det var jo egentlig det som var poenget da jeg starta på den nye hjemmesiden, men tenkte det var greit med litt "juks", altså ha en tabell som utgangspunkt :whistle:

Men ja, nå skal jeg prøve å legge det vekk og herje med div..Så får jeg se åssen resultatet blir..

Rupal · 21. juni 2006

Men fortsatt.. Hvordan klarer jeg å plassere et element et visst sted på sida?

Jeg prøver f.eks med :

div#main{

border:2px solid;

posistion:absolute;

top:300px;

left:100px;

width:800px;

}

Hva er feilen her? Hvordan får jeg plassert dette på det stedet jeg vil? Tror jeg må innhente noen grunnleggende kunnskap hva angår CSS, er visst dummere enn jeg trodde :wallbash:

Garreth · 21. juni 2006

Det er lettere å bruke float egenskapen. Da "flyter" divene dine innenfor et gitt område. Se og lær på http://glish.com/css/

Rupal · 21. juni 2006

Da har jeg knota litt, og har støtt på et lite problem...

Jeg har prøvd å bruke div og float, men problemet nå er at jeg skal ha en boks under menyboksen, som f.eks viser ipadresse, dato osv.

Se vedlegget for bilde...

Hvordan skal jeg klare å legge "infoboksen" under menyboksen (med litt mellomrom)? Prøvde med float og clear, men jeg gjør helt klart noe feil :thumbdown:

Her er css-koden for å få det jeg har på bildet:


body {
 font-family: 70% Verdana, Geneva, Arial, helvetica, sans-serif;
 background-color:#b49055;	
 margin: 0 auto;
 text-align: center; 
 padding-top:5px;
 width: 800px;
}

div#header{
border:2px solid;
background-image:url();
width:800px;
height:150px;
}

div#main{
border:2px solid;
width:800px;
height:500px;
margin-top:10px;
}

#meny{
float:left;
width: 140px;
margin: 0;
padding: 0;
list-style-type: none;
font:70% Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
background:url(images/menybackg.jpg);
border:1px solid;
border-right:hidden;
border-color:#000000

}


#menydiv{padding-left:10px;
}	

#meny li{}
#meny a{
display: block;
width: auto;
height:100%;
text-decoration: none;
text-align:left;
padding:4px;
border: 1px solid #d5cb86;

}
#meny a:link{color: #333300;}
#meny a:visited{color: #333333;}
#meny a:hover{background-color:#b49055;
border: 1px solid;
}


#info{
width: 136px;
margin: 0;
padding: 0;
padding-left:4px;
font: 70% Verdana, Arial, Helvetica, sans-serif;
background:url(images/menybackg.jpg);
border:1px solid;
border-right:hidden;
border-color:#000000;
list-style-type: none;
}

#infodiv{
padding-left:10px
}

Htmlsiden blir slik:

<body>
<!--Headerbanner-->
<div id="header"></div>

<!--resten av sideinnholdet-->
<div id="main">

<p><%@include file="meny.jsp"%></p>
<p><%@include file="info.jsp"%></p> 


</div>
</body>

Hva slags endringer kan jeg gjøre?Forklarer gjerne hvis det er noe uforståelig..

Rupal · 22. juni 2006

No help? :cry:

Garreth · 22. juni 2006

For den lette måten så lager du deg en venstre div som som ikke er større enn menyen. Da vil det ikke være plass vedsiden av menyen, og resten vil komme under.

Den vanskelige måten er å bruke cssen litt anerledes, og da slipper du den ekstra venstre diven. Etter hvert som du blir vandt med div og css så merker du fort at du egentlig ikke trenger masse ekstra diver for å holde ting på plass.

Rupal · 22. juni 2006

For den lette måten så lager du deg en venstre div som som ikke er større enn menyen. Da vil det ikke være plass vedsiden av menyen, og resten vil komme under.

Den vanskelige måten er å bruke cssen litt anerledes, og da slipper du den ekstra venstre diven. Etter hvert som du blir vandt med div og css så merker du fort at du egentlig ikke trenger masse ekstra diver for å holde ting på plass.

6363960[/snapback]

Ok, prøvde det, men virka ikke helt..Skal prøve litt til. Skulle gjerne lært den "vanskelige" måten å bruke css på, men det kommer vel etterhvert når jeg behersker det grunnleggende :roll:

Kom gjerne med noen andre forslag, eller konkret innsetting i den overnevnte koden..

Logg inn

Plasseringsproblem i CSS

Anbefalte innlegg

Rupal

Lenke til kommentar

Videoannonse

Gjest medlem-77217

Lenke til kommentar

Rupal

Lenke til kommentar

hockey500

Lenke til kommentar

Rupal

Lenke til kommentar

hockey500

Lenke til kommentar

Rupal

Lenke til kommentar

Rupal

Lenke til kommentar

Garreth

Lenke til kommentar

Rupal

Lenke til kommentar

Rupal

Lenke til kommentar

Garreth

Lenke til kommentar

Rupal

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer