Avatar billede testpilot_dk Nybegynder
06. august 2005 - 16:03 Der er 34 kommentarer og
1 løsning

Flydende elementer

Hej!

Jeg har lige siddet og kigget på en lektion fra html.dk, hvor han omtaler flydende elementer i CSS..

Jeg har følgende kode i min ASP fil ...

--------------------------------------------
Response.Write("<div id=""billede1"">")
Response.Write("<img src='")
Response.Write rss("Billede")
Response.Write("'></div>" & vbCrLf & "<p>")
Response.Write rss("Tekst")
Response.Write("</p>" & vbCrLf)

Jeg har følgende i mit CSS dokument
--------------------------------------------
#billede1 {
    width: 100px;
    float: left;;
}

Den finder fint nok billedet, men den tekst som jeg samtidig får skrevet ud, bliver stadig sat nedenunder billedet, hvad gør jeg galt!

Jeg lægger lige koden til at siden

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"    "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Facilities</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel='stylesheet' href='MainStyle.css' type="text/css" />
</head>
<body>
<div id="billede1"><img src='images\camping.jpg'></div>
<p>blla bla blkja ljbalkj vlkjfalksjflak fslakjf ljlajs lfja flkajfs afjaljf alkfsj alkfj alfsjk alsfkj alsfjal sflak fjlasjf lkajf</p>
<div id="billede2"><img src='images\view2.gif'></div>
<p>ajklsfaskljalksjf</p>
<div id="billede1"><img src='images\view.gif'></div>
<p>fa,snkjlgsdgksd gjksdjgklæsdjgjks dgkljsdgkjsdlkfjljkl</p>
</table>

</body>
</html>
Avatar billede apo Praktikant
06. august 2005 - 16:09 #1
Du bruger id til at kalde din CSS, brug class i stedet (id er unikt, class kan bruges på flere elementer):

.billede1 {
    width: 100px;
    float: left;;
}

------------------------------------

<html>
<head>
<title>Facilities</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel='stylesheet' href='MainStyle.css' type="text/css" />
</head>
<body>
<div class="billede1"><img src='images\camping.jpg'></div>
<p>blla bla blkja ljbalkj vlkjfalksjflak fslakjf ljlajs lfja flkajfs afjaljf alkfsj alkfj alfsjk alsfkj alsfjal sflak fjlasjf lkajf</p>
<div class="billede2"><img src='images\view2.gif'></div>
<p>ajklsfaskljalksjf</p>
<div class="billede1"><img src='images\view.gif'></div>
<p>fa,snkjlgsdgksd gjksdjgklæsdjgjks dgkljsdgkjsdlkfjljkl</p>
</table>

Apo
Avatar billede apo Praktikant
06. august 2005 - 16:09 #2
+
</body>
</html>

:-)
Avatar billede testpilot_dk Nybegynder
06. august 2005 - 16:12 #3
Nope samme resultat! den gør det ikke!

</body>
</html>

Har jeg da husket
Avatar billede apo Praktikant
06. august 2005 - 16:14 #4
Og du har ændret:
#billede1 {
    width: 100px;
    float: left;;
}

Til:

.billede1 {
    width: 100px;
    float: left;;
}

?
Avatar billede testpilot_dk Nybegynder
06. august 2005 - 16:14 #5
Jeps, det har jeg gjort
Avatar billede busschou Praktikant
06. august 2005 - 16:15 #6
hvorfor egentlig lægge billederne i en div og teksten uden om?
<img> er et blocklevel element og opfører sig jo ligesådan :o)
Avatar billede apo Praktikant
06. august 2005 - 16:16 #7
Ja, det skulle jeg også til at spørge om :-)
Avatar billede busschou Praktikant
06. august 2005 - 16:16 #8
altså
---
<img class="billede1" src='images\camping.jpg'>
blla bla blkja ljbalkj vlkjfalksjflak fslakjf ljlajs lfja flkajfs afjaljf alkfsj alkfj alfsjk alsfkj alsfjal sflak fjlasjf lkaj
----
burde vel være ligesågodt?
Avatar billede testpilot_dk Nybegynder
06. august 2005 - 16:18 #9
ja okay! jeg har bare fulgt deres eksempel, og der gør de det sådan!

Nu har jeg fået det til at have første linje allernederst på billedet kan jeg klarer den med align til teksten
Avatar billede apo Praktikant
06. august 2005 - 16:18 #10
Desuden bør højde og bredde, være angivet på <img>:
<img class="billede1" src="images\camping.jpg" style="width:100px; height:100px; border:0;">
blla bla blkja ljbalkj vlkjfalksjflak fslakjf ljlajs lfja flkajfs afjaljf alkfsj alkfj alfsjk alsfkj alsfjal sflak fjlasjf lkaj
Avatar billede busschou Praktikant
06. august 2005 - 16:23 #11
her står det jo meget klart
http://www.w3schools.com/css/pr_class_float.asp
"The image or text moves to the left in the parent element"
Så når du har denne her
<div id="billede1"><img src='images\camping.jpg'></div>
Så er det din div som flyder til venstre i forhold til elementet ovenover, altså body
Avatar billede testpilot_dk Nybegynder
06. august 2005 - 16:27 #12
hvordan får jeg så min tekst op ved siden af billedet
Avatar billede apo Praktikant
06. august 2005 - 16:29 #13
<img class="billede1" src="images\camping.jpg" style="float:left; width:100px; height:100px; border:0;">
blla bla blkja ljbalkj vlkjfalksjflak fslakjf ljlajs lfja flkajfs afjaljf alkfsj alkfj alfsjk alsfkj alsfjal sflak fjlasjf lkaj
Avatar billede apo Praktikant
06. august 2005 - 16:30 #14
nu roder jeg rundt i det...

<img class="billede1" src="images\camping.jpg" style="width:100px; height:100px; border:0;">
blla bla blkja ljbalkj vlkjfalksjflak fslakjf ljlajs lfja flkajfs afjaljf alkfsj alkfj alfsjk alsfkj alsfjal sflak fjlasjf lkaj

Virker det ikke med ovenstående?
Avatar billede testpilot_dk Nybegynder
06. august 2005 - 16:31 #15
det gør den ikke!

Jeg har den sådan

<p><img class="billede1" src="images\camping.gif"> asflækasæfkaælsfk æaslkf aæslf klæasf slæak fæla falæskf laæs f </p>
Avatar billede apo Praktikant
06. august 2005 - 16:33 #16
Prøv med følgende:

<img class="billede1" src="images\camping.jpg" style="width:100px; height:100px; border:0;">
blla bla blkja ljbalkj vlkjfalksjflak fslakjf ljlajs lfja flkajfs afjaljf alkfsj alkfj alfsjk alsfkj alsfjal sflak fjlasjf lkaj

Jeg mener at der skal være angivet højde og bredde på billedet...
Avatar billede apo Praktikant
06. august 2005 - 16:36 #17
Hvordan ser din kode ud lige nu?
Avatar billede testpilot_dk Nybegynder
06. august 2005 - 16:41 #18
ASP
        Response.Write("<p><img class=""Billede1"" src='")
        Response.Write rss("Billede")
        Response.Write("'>" & vbCrLf & "")
        Response.Write rss("Tekst")
        Response.Write("</p>" & vbCrLf)

CSS
.Billede1 {
    width: 100px;
    float: left;
    height: 100px;
}
Avatar billede testpilot_dk Nybegynder
06. august 2005 - 16:51 #19
Men teksten står på linje med billedet nu, jeg mangler bare at den bliver flyttet op i toppen af billedet istedet
Avatar billede apo Praktikant
06. august 2005 - 16:51 #20
Response.Write("<p><img class=""Billede1"" src='")
Response.Write rss("Billede")
Response.Write("'>" & vbCrLf & "") <-- Skal det mellemrum være der?
Response.Write rss("Tekst")
Response.Write("</p>" & vbCrLf)
Avatar billede testpilot_dk Nybegynder
06. august 2005 - 16:54 #21
nu har jeg fjernet det, men den gør stadig ikke som det skal, med at teksten skal være i top
Avatar billede testpilot_dk Nybegynder
06. august 2005 - 16:55 #22
Vent lige lidt, nu gjorde den det!
Avatar billede testpilot_dk Nybegynder
06. august 2005 - 16:56 #23
Send et svar, så får du dine point!

Tak for hjælpen og god weekend
Avatar billede apo Praktikant
06. august 2005 - 16:57 #24
Glad for at du fik det til at virke :-)

Giv lidt points til Busschou, også...

Apo
Avatar billede apo Praktikant
06. august 2005 - 17:01 #25
Iøvrigt kan du koge din kode ned til følgende:

Response.Write "<p><img class=""Billede1"" src='" & rss("Billede") & "'>"
Response.Write rss("Tekst") & "</p>" & vbCrLf

Og god weekend til dig også :-)
Avatar billede busschou Praktikant
06. august 2005 - 17:12 #26
tag du bare dem apo , jeg overlod det jo lidt til dig :o)
Avatar billede busschou Praktikant
06. august 2005 - 17:14 #27
apo >> hvorfor så ikke "koge" den helt ned? ;o)
--
Response.Write "<p><img class=""Billede1"" src='" & rss("Billede") & "'>" & rss("Tekst") & "</p>" & vbCrLf
--
eller med "rigtige" gåseøjne hele vejen igennem
--
Response.Write "<p><img class=""Billede1"" src=""" & rss("Billede") & """>" & rss("Tekst") & "</p>" & vbCrLf
Avatar billede testpilot_dk Nybegynder
06. august 2005 - 17:17 #28
Det kigger jge lige på!!!

Takker
Avatar billede apo Praktikant
06. august 2005 - 17:45 #29
busschou > Så siger jeg tak. Det tænkte jeg på, da jeg havde sendt indlægget... Men jeg ville ikke 'forvirre' den gode testpilot_dk ved, at blive ved med at rette (Jeg har lavet nok rod i det her spørgsmål i forvejen ;-)

testpilot_dk > Tak for points :-)
Avatar billede busschou Praktikant
06. august 2005 - 17:50 #30
hehe ja forvirringen bliver hurtig total, også derfor jeg valgte at hoppe ud igen :o)
Avatar billede testpilot_dk Nybegynder
07. august 2005 - 13:09 #31
Okay, nu har jeg kogt det ned som Busschou skrev!

Så melder der sig et nyt spørgsmål!
Kan jeg godt have en if sætning som variere hvor min float skal indsættes, f.eks. sådan at hver anden bliver smidt ud til højre
Avatar billede testpilot_dk Nybegynder
07. august 2005 - 13:11 #32
Glem at jeg spurgte, jeg har lavet en lille slå fejl, som gjorde at den ikke opførte sig rigtigt
Avatar billede busschou Praktikant
07. august 2005 - 13:12 #33
ja da, hvis det er konskvent så noget ala
---
count = 0
if count mod 2 = 0 then
  //flyd til højre
  tæl count op
else
  //flyd til venstre
  tæl count op
end if
Avatar billede busschou Praktikant
07. august 2005 - 13:12 #34
ok ;o)
Avatar billede testpilot_dk Nybegynder
07. august 2005 - 13:16 #35
Jeg havde lige forvekslet et stort B med et lille b :)

God Søndag
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Kurser inden for grundlæggende programmering

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester