100% width header..

[exess15]

Hei. Har en banner på 900px som jeg vil ska strekke seg 100% på alle skjermer..

 

Men når jeg bruker width: 100%; bare repeater den seg. Det jeg vil er at en av de stedene på headeren der det ikke er noe grafisk design, dvs bare gradient skal strekke seg, slik at man ikke ser på headeren at den er strukket..

 

Mulig? Eventuelt andre måter å gjøre dette på.. eller kriterier for at det skal gå an..

 

Takker for svar

/Jan Tore

Endret 13. mars 2007 av exess15

[Svinat]

Kan du forklare litt mer? Mener du at du har to bilder i banneret eller noe?

[exess15]

Kan du forklare litt mer? Mener du at du har to bilder i banneret eller noe?

8148161[/snapback]

 

[exess15]

Kan du forklare litt mer? Mener du at du har to bilder i banneret eller noe?

8148161[/snapback]

 

8148203[/snapback]

 

Hvis det blir litt kronglete forklart kan jeg enkelt si at jeg vil ha 100% width på headeren uten at den skal strekke seg slik at den blir stygg, eller at den skal repetere seg..

 

/Jan Tore

[ExteC]

Det du spør om er ingen umulighet. Dersom du bare skal ha gradient som du sier, kopierer du bare en liten del av gradient feltet ditt (Hele høyden, men bredden kan være f.eks 3px) Deretter legger du inn en class i CSS som gjør bildet repetert (Vet ikke hvor kjent du er med CSS, men du kan evt. lese mer her: w3schools.com)

 

 

<style>

.bannerClass {

background-image: url('gradient.gif');

background-repeat: repeat-x;

}

</style>

 

Deretter legger du inn denne koden i HTML fila :

<table witdh='100%'>

<tr>

<td class='bannerClass'><img src='dittbanner.jpg'>

</td>

</tr>

</table>

 

 

Dersom du skal ha banneret sentrert hele tiden, legger bytter du ut:

<td class='bannerClass'><img src='dittbanner.jpg'></td>

med:

<td class='bannerClass' align='center'><img src='dittbanner.jpg'></td>

 

Hvis du skal ha en annen plassering så bytt ut align verdien med enten 'right' eller 'left'

 

Vet ikke helt om det er slik du hadde tenkt det..

Det finnes HELT SIKKERT en mye bedre måte å gjøre det på, men dette er hva jeg kommer på i farten, som bør gjøre nytten..

Se hva du får ut av det.

[exess15]

Det du spør om er ingen umulighet. Dersom du bare skal ha gradient som du sier, kopierer du bare en liten del av gradient feltet ditt (Hele høyden, men bredden kan være f.eks 3px) Deretter legger du inn en class i CSS  som gjør bildet repetert (Vet ikke hvor kjent du er med CSS, men du kan evt. lese mer her: w3schools.com)

 

 

<style>

.bannerClass {

background-image: url('gradient.gif');

background-repeat: repeat-x;

}

</style>

 

Deretter legger du inn denne koden i HTML fila :

<table witdh='100%'>

<tr>

<td class='bannerClass'><img src='dittbanner.jpg'>

</td>

</tr>

</table>

 

 

Dersom du skal ha banneret sentrert hele tiden, legger bytter du ut:

<td class='bannerClass'><img src='dittbanner.jpg'></td>

med:

<td class='bannerClass' align='center'><img src='dittbanner.jpg'></td>

 

Hvis du skal ha en annen plassering så bytt ut align verdien med enten 'right' eller 'left'

 

Vet ikke helt om det er slik du hadde tenkt det..

Det finnes HELT SIKKERT en mye bedre måte å gjøre det på, men dette er hva jeg kommer på i farten, som bør gjøre nytten.. 

Se hva du får ut av det.

8148312[/snapback]

 

table til design?

 

/Jan Tore

[exess15]

Det du spør om er ingen umulighet. Dersom du bare skal ha gradient som du sier, kopierer du bare en liten del av gradient feltet ditt (Hele høyden, men bredden kan være f.eks 3px) Deretter legger du inn en class i CSS  som gjør bildet repetert (Vet ikke hvor kjent du er med CSS, men du kan evt. lese mer her: w3schools.com)

 

 

<style>

.bannerClass {

background-image: url('gradient.gif');

background-repeat: repeat-x;

}

</style>

 

Deretter legger du inn denne koden i HTML fila :

<table witdh='100%'>

<tr>

<td class='bannerClass'><img src='dittbanner.jpg'>

</td>

</tr>

</table>

 

 

Dersom du skal ha banneret sentrert hele tiden, legger bytter du ut:

<td class='bannerClass'><img src='dittbanner.jpg'></td>

med:

<td class='bannerClass' align='center'><img src='dittbanner.jpg'></td>

 

Hvis du skal ha en annen plassering så bytt ut align verdien med enten 'right' eller 'left'

 

Vet ikke helt om det er slik du hadde tenkt det..

Det finnes HELT SIKKERT en mye bedre måte å gjøre det på, men dette er hva jeg kommer på i farten, som bør gjøre nytten.. 

Se hva du får ut av det.

8148312[/snapback]

 

table til design?

 

/Jan Tore

8148350[/snapback]

 

Godt mulig det er sånn, men ser etter en litt enklere måte å gjøre det på. Om mulig selvfølgelig..

 

Poenget er jo at headeren skal være 100% uten å bli misvist..

 

/Jan Tore

[ExteC]

Ja, kan bruke table til design. (Selv om det frarådes, er det enkelt og greit for late mennesker som ikke har lest alt om CSS ennå )

PS: Border er selvfølgelig '0'

 

Vel, det er jo hvertfall en måte å gjøre det på. Vet også at det er en vanskeligere måte, men da må du sette deg inn i GDlibrary..

 

EDIT:

Du kan se hva jeg fikk ut av mitt forslag her.

 

Var ikke veldig nøyaktig, og jobbet ikke med prosjektfila, derfor er det feil, men du ser hvertfall prinsippet.. (Vet ikke om dette virker helt, for sitter på mac med 1024x768 oppløsning) Men du sitter kanskje med større skjerm?

Endret 13. mars 2007 av ExteC

[Svinat]

Prøv slik:

 

CSS

* {margin: 0; padding: 0; }

#logo {
         background: url('stien/til.bildet') #FFF no-repeat;
         width: 800px; (bredden på logoen)
         height: 100px; (høyden)
         position: absolute;
         margin: 0 0 0 0;
}

#repeat {
         background: url('stien/til.repeat') #FFF repeat-x;
         width: 100%;
         height: 100px; (samme høyde som logo)
         float: left;
}

Da må altså repeat være det som skal repeteres, regner med at du forstår.

 

Html

<body>

<div id="repeat"></div>
<div id="logo"></div>

</body>

 

Da vil altså logoen legge seg oppå repeaten, pass på at bildene er riktig i størrelsen i forhold til hverandre.

[exess15]

Prøv slik:

 

CSS

* {margin: 0; padding: 0; }

#logo {
         background: url('stien/til.bildet') #FFF no-repeat;
         width: 800px; (bredden på logoen)
         height: 100px; (høyden)
         position: absolute;
         margin: 0 0 0 0;
}

#repeat {
         background: url('stien/til.repeat') #FFF repeat-x;
         width: 100%;
         height: 100px; (samme høyde som logo)
         float: left;
}

Da må altså repeat være det som skal repeteres, regner med at du forstår.

 

Html

<body>

<div id="repeat"></div>
<div id="logo"></div>

</body>

 

Da vil altså logoen legge seg oppå repeaten, pass på at bildene er riktig i størrelsen i forhold til hverandre.

8148873[/snapback]

 

funket faktisk = )

 

men hva gjør de 4 nullene? de som får det til å fylle ut hele bredden?

 

/Jan Tore

[pedsti]

de 4 nullene ? marginen du tenker på`?

[attach]

0 nr. 1 = opp

0 nr. 2 = høyre

0 nr. 3 = ned

0 nr. 4 = venstre