---

Jeg har et problem med CSS.

I kan se det her :
http://scootergrisen.dk/

Jeg vil gerne have lave det fra sådan til sådan :
http://scootergrisen.dk/scooterhjemmeside/download/uploadede_filer/123.jpg

Så overskriftenes baggrund fylder hele bredden og samtid kan tilpasse
sig når man ændre browserens bredde.

Håber i har en løsning.

---

scootergrisen skrev:
> Jeg har et problem med CSS.
>
> I kan se det her :
> http://scootergrisen.dk/
>
> Jeg vil gerne have lave det fra sådan til sådan :
> http://scootergrisen.dk/scooterhjemmeside/download/uploadede_filer/123.jpg
>
> Så overskriftenes baggrund fylder hele bredden og samtid kan tilpasse
> sig når man ændre browserens bredde.
>
> Håber i har en løsning.

<div id="overskriftholder">
<div id="overskrift">Forsiden med nyheder
</div>
</div>
<span class="lidtplads"></span>
<div style="clear:both;"></div>
<a style="clear:both;" name="fa_seneste_nyt"></a>

<div class="overskriftfordataholder">
<div class="overskriftfordata">Få seneste nyt</div>
</div>

Det er de tre sidste linjer der tegner din overskrift.
Begge er leftfloat'ede, men uden bredde. Det forårsager
at bredden tilpasses indholdet. Prøv med en bredde
på de to elementer på 100%.


--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

---

Ud over hvad Jørgen har dækket har så har du nogle valideringsfejl og
flere hundrede CSS advarsler.
De fleste vil forsvinde hvis du angiver en korrekt doctype, du kan
ikke vælge xhtml strict når du bruger frames, dette gælder også
iframe. Og så vil det hjælpe at få ryddet op i CSS'en så du får et
bedre overblik.

Regards Jens Peter Karlsen.



On Sun, 18 Apr 2010 23:24:47 -0700 (PDT), scootergrisen
<fedblindkat@yahoo.dk> wrote:

>Jeg har et problem med CSS.

---

overskriftfordataholder og overskriftfordata er nu sat til 100 % men
problemet er så bare at det yderste at billedet ikke vises i højre
side... altså det afrundede hjørne kommer ikke med.

Hvis jeg sætter den til lidt under 100% for eksempel 96% så kommer det
afrundede hjørne med men så passer det ikke helt med bredden.

Jeg har valideret min hjemmeside mange gange og de fejl som kommer er
nogen jeg kender til eller også er det her mens jeg er ved at lave om
på min hjemmeside.
Der er nogle ting som wrap og iframe som ikke er tilladt men det vil
så betyde at jeg ikke kan få min hjemmeside som jeg vil så jeg vil
ikke gå efter en 100 % validering.

---

scootergrisen har bragt dette til verden:
> overskriftfordataholder og overskriftfordata er nu sat til 100 % men
> problemet er så bare at det yderste at billedet ikke vises i højre
> side... altså det afrundede hjørne kommer ikke med.
>
> Hvis jeg sætter den til lidt under 100% for eksempel 96% så kommer det
> afrundede hjørne med men så passer det ikke helt med bredden.
>
> Jeg har valideret min hjemmeside mange gange og de fejl som kommer er
> nogen jeg kender til eller også er det her mens jeg er ved at lave om
> på min hjemmeside.
> Der er nogle ting som wrap og iframe som ikke er tilladt men det vil
> så betyde at jeg ikke kan få min hjemmeside som jeg vil så jeg vil
> ikke gå efter en 100 % validering.

Sæt din hjørner ind i feltet, istedet for at have dem udenfor..

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk

---

I stedet for at angive xhtml strict som doctype så angiv transitional.
Det vil fjerne de fleste fejl uden at du mister noget på siden.

Regards Jens Peter Karlsen.

On Wed, 21 Apr 2010 11:40:22 -0700 (PDT), scootergrisen
<fedblindkat@yahoo.dk> wrote:

>Der er nogle ting som wrap og iframe som ikke er tilladt men det vil
>så betyde at jeg ikke kan få min hjemmeside som jeg vil så jeg vil
>ikke gå efter en 100 % validering.

---

Jens Peter Karlsen skrev:

> I stedet for at angive xhtml strict som doctype
> så angiv transitional.

Hvorfor ikke gå efter det ultimative?

> Det vil fjerne de fleste fejl uden at du mister
> noget på siden.

Ja, men hun bliver en bedre webdesigner af at
rette fejlene

--
Allan Vebel
http://vebel.dk | http://html-faq.dk | http://webdesigngruppen.dk

---

---

Nu har jeg lavet 3 billeder ialt til overskriften der hvor der står
"Forsiden med nyheder" på i midten på hjemmesiden : http://scootergrisen.dk/

Men hvis man lave browser vinduet meget smalt så hopper tekst og
grafik... istedet for at være samlet.
Desuden følger grafikken ikke teksten... Altså hvis jeg laver fonten
større eller mindre så ville det jo være smart hvis baggrunden fulgte
med.

Hvis i ser helt bort fra min kode hvordan ville i så lave det ?
Altså så bredden automatisk fulgte med i forskellig browser
størrelsen.
Og at baggrundsgrafikken automatisk fulgte med tekstens størrelse hvis
jeg senere vil ændre den uden at ændre grafikken,

Jeg får ikke noget ud af at ændre fra STRICT til TRASITIONAL andet end
så kan jeg sige juhu min hjemmeside validere. Det er ikke det er min
hjemmeside ikke validere at det ikke virker som jeg vil have det.
Det fordi jeg lige her den anden dag har valgt at skifte fra en fast
bredde på hjemmesiden som passede til 1280 pixels bred skærm... men
der var nogen brugere som skrev at den var for bred til deres skærm så
derfor har jeg lavet den om til at automatisk tilpasse sig.

---

scootergrisen skrev:

> Hvis i ser helt bort fra min kode hvordan ville i så lave det ?
> Altså så bredden automatisk fulgte med i forskellig browser
> størrelsen.

Jeg ville gå tilbage til kilden. Den teknik, du
anvender kaldes sliding doors teknikken og er første gang(?)
beskrevet af Douglas Bowman i artiklen
http://www.alistapart.com/articles/slidingdoors/

Der findes sikkert andre artikler om emnet,
men det korte af det lange, at det er
lidt tricky mht. hvilket element der
får hvilken baggrund. Det skal jo være
sådan at den rektangulære grafik der
skal stå i højre side og som har det
runde hjørne skal dække over den underliggende
grafik, der tegner midterstykket.

I øvrigt mener jeg at det kun er nødvendigt
med to grafikker, hvis man ellers gør
det rigtigt.

Du kunne gøre livet lidt lettere for
dem, du be'r om råd, hvis du i tilfælde
som dette pillede de problematiske dele
af siden ud og lavede en testside med
problemet i sig selv. Jeg føler jeg spilder
en masse tid men at rode rundt i koden til
din side og dernæst finde de relevante
stylesheet formdeklarationer. Jeg taber
motivationen for at gå til bunds i det
eksakte problem...

--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

---

---

Okay her er et eksempel :
http://scootergrisen.dk/scooterhjemmeside/temp/a.html

overskrift venstre : http://scootergrisen.dk/scooterhjemmeside/billeder/overskriftslidea.png
overskrift midten : http://scootergrisen.dk/scooterhjemmeside/billeder/overskriftslideb.png
overskrift højre : http://scootergrisen.dk/scooterhjemmeside/billeder/overskriftslidec.png

Det ser jo fint ud men hvis man laver browser vinduet smallere end
teksten er bred så hopper tekst og grafik ned.
På det nederste eksempel har jeg brugt overflow:hidden men at en eller
anden grund så fjerner den hele teksten... selvom jeg kun vil have det
den bare skal cutte enden af teksten.

---

Det er klart, teksten står i en div som bliver hidden og dermed også
teksten.

Jeg har lavet noget til dig her:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">

#jpk{
margin:0;
width:100%;
height:60px;

background:url("http://scootergrisen.dk/scooterhjemmeside/billeder/overskriftslideb.png")
repeat-x left top;
text-decoration:none;
font-weight:bold;
color:#765;
font-size:xx-large;
color:#000;
line-height:60px;
overflow:hidden;
}

#spacer {
   margin-left:25px
}
</style>

</head>
<body>

<div id="jpk">
<img style="float:left" alt=""
src="http://scootergrisen.dk/scooterhjemmeside/billeder/overskriftslidea.png"
/>
<span id="spacer"></span>Rodekassen - specielt for 3 hjulet scootere
<img style="float:right" alt=""
src="http://scootergrisen.dk/scooterhjemmeside/billeder/overskriftslidec.png"
/>
</div>

</body>
</html>


Regards Jens Peter Karlsen.

PS Jeg glemte at lægge overskriftslideb.png ind som baggrund men det
klarer du nok selv.

On Fri, 23 Apr 2010 22:39:24 -0700 (PDT), scootergrisen
<fedblindkat@yahoo.dk> wrote:

>På det nederste eksempel har jeg brugt overflow:hidden men at en eller
>anden grund så fjerner den hele teksten... selvom jeg kun vil have det
>den bare skal cutte enden af teksten.

---

Tak det virker godt.

Man når jeg bruger koden på hjemmesiden så er det et eller andet andet
som ændre på det...
Ser man dit eksempel er de højre grafik helt over til højre hvor den
skal være og teksten står i midten lodret.
Men når jeg bruger koden på hjemmeside så bliver det lavet om til at
teksten står helt nederst og den højre grafik er helt tæt henne ved
tekstens slutning...

Jeg har kigget min css kode igennem men jeg kan ikke finde ud af hvad
det skulle være det er skyld i det.

---

Okay det var en fejl fordi jeg havde lavet 2 style attributer i en
<img> tag det kunne den åbentbart ikke lide.
Det ser ud til at virke fint nu.

Hvis nu der står Forsiden med nyheder i overskriften og er lavet
browser vinduer smalt så der kun står Forsiden.
Hvis jeg så laver det lidt smallere så forsvinder Forsiden helt.
Kan man lave det sådan at det ikke er hele ordet der bliver fjernet ?
Så der står....
Forsiden
Forside
Forsid
Forsi
Fors
For
Fo
F

jo smallere browser vinduet blir istedet for den bare cuttet hele
ordet.

---

Det kan du ved at sætte hvert bogstav i en span, men er det ikke lidt
meget at gøre ud af det? Der vil næppe være mange der bruger så smalt
et browservindue.

Regards Jens Peter Karlsen.

On Sun, 25 Apr 2010 10:49:02 -0700 (PDT), scootergrisen
<fedblindkat@yahoo.dk> wrote:

>Hvis jeg så laver det lidt smallere så forsvinder Forsiden helt.
>Kan man lave det sådan at det ikke er hele ordet der bliver fjernet ?

---

Jo det sku fint nok nu.
Det var mere hvis der var et langt ord uden mellemrum som så ikke vil
blive vist.
Tak for hjælpen det ser ud til at virke som jeg gerne ville.

Tak