Forum Mjukvara Programmering och digitalt skapande Tråd

Html Css ??

1
Skriv svar
Permalänk
Inaktiv
●

Html Css ??

Tja!

Tänkte fråga om någon vet hur man gör för att få bilderna på en webbsida att stå helt stilla och inte gå över varann när man tex gör fönstret mindre.
Då tex jesper.nu eller vilken sida som helst inte gör så utan bara minimerar sidan och då får fram scroll grejer på sidorna i webbfönstret..
När jag lagt in bild1 som ligger centralt på sidan och lägger sen in bild2 på sidan som ska vara längst ner i vänstra hörnet på bild1 så funkar det utmärtk tills jag gör fönstret mindre och bilderna har inte längre samma position, tex så ligger bild2 då inte längre i vänstra hörnet på bild1.

Hoppas ni förstår, Tack!

Redigera
Citera flera Citera
Permalänk
Medlem
●

Det du söker är "fixed width", eller på svenska; webbdeisgn med fast bredd (eller nått sånt).
Jag förstår inte riktigt hur du menar normalt sett så är det "working as intended" att bilder flyttas när sidan blir mindre. Det man gör då är att säga "den här containern Är 500 pixlar bred, deal with it". Browsern kan liksom inte göra containern mindre (även om den får göra det om användaren väljer att förbise vissa stilregler eller stilar helt och hållet).

Ex:
<div style="width: 500px;">
<p>Jag är lite text som inte kommer dras ihop även om browsern blir mycket mindre för min förälder är liksom typ lång nog och fast redan, tihi!</p>
</div>

Jag är osäker hur exakt du menar med bilderna, men jag misstänker att du redan har pillat lite med html och css så att det är något du själv har gjort som gör att bilderna inte tar hänsyn till varandra när webbläsaren dras ihop.

Visa signatur

Cat funeral! Cat funeral!
>>> 112383 <<<

Redigera
Citera flera Citera
Permalänk
Medlem
●

Om du vill att scrollen ska komma fram är det väl bara att lägga till overflow:scroll; (overflow:auto; är bättre dock) under "body" i css-filen? Eller har jag missförstått ditt problem?

Visa signatur

"Att installera AMD-drivrutiner är lite som en Svensson-variant av rysk roulette.." //Kazuo

Redigera
Citera flera Citera
Permalänk
Inaktiv
●

.

Senast redigerat
Redigera
Citera flera Citera
Permalänk
Inaktiv
●
Skrivet av felxi:

Om du vill att scrollen ska komma fram är det väl bara att lägga till overflow:scroll; (overflow:auto; är bättre dock) under "body" i css-filen? Eller har jag missförstått ditt problem?

Gå till inlägget
Skrivet av pscs3:

Det du söker är "fixed width", eller på svenska; webbdeisgn med fast bredd (eller nått sånt).
Jag förstår inte riktigt hur du menar normalt sett så är det "working as intended" att bilder flyttas när sidan blir mindre. Det man gör då är att säga "den här containern Är 500 pixlar bred, deal with it". Browsern kan liksom inte göra containern mindre (även om den får göra det om användaren väljer att förbise vissa stilregler eller stilar helt och hållet).

Ex:
<div style="width: 500px;">
<p>Jag är lite text som inte kommer dras ihop även om browsern blir mycket mindre för min förälder är liksom typ lång nog och fast redan, tihi!</p>
</div>

Jag är osäker hur exakt du menar med bilderna, men jag misstänker att du redan har pillat lite med html och css så att det är något du själv har gjort som gör att bilderna inte tar hänsyn till varandra när webbläsaren dras ihop.

Gå till inlägget

Exempel
Där ser ni tex hur den undre bilden går ihop med den övre, då jag har minskat webb fönstret.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Hade varit mycket lättare om du visade oss lite kod.

Visa signatur

Mina poster är en illusion. Det som står skrivet här över står i själva verket inte där så inget av det som du läser är sant. Inte ens den här texten. Jag har själv ingen kunskap om det jag skriver och ingen bör således läsa eller ta in den information som står skrivet.

Redigera
Citera flera Citera
Permalänk
Inaktiv
●
Skrivet av rumpnisse:

Hade varit mycket lättare om du visade oss lite kod.

Gå till inlägget

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

#splash {
position: absolute;
width: 200px;
height: 140px;
top: 50%;
left: 50%;
margin-top: -280px;
margin-left: -200px
}

#bild2 {
position: absolute;
width: 200px;
height: 140px;
top: 80%;
left: 60%;
margin-top: -280px
margin-left: -200px;
}

</style>

<div id="splash">
<img src="bild.jpg" width="400" height="140" alt="splash" />
</div>

<div id="bild2">
<img src="bild.jpg" width="400" height="140" alt="splash" />
</div>

<div style="width: 500px;">
<p>Jag är lite text som inte kommer dras ihop även om browsern blir mycket mindre för min förälder är liksom typ lång nog och fast redan, tihi!</p>
</div>

<title>Untitled Document</title>
</head>
<body>
</body>
</html>

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av 940606:

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

#splash {
position: absolute;
width: 200px;
height: 140px;
top: 50%;
left: 50%;
margin-top: -280px;
margin-left: -200px
}

#bild2 {
position: absolute;
width: 200px;
height: 140px;
top: 80%;
left: 60%;
margin-top: -280px
margin-left: -200px;
}

</style>

<div id="splash">
<img src="bild.jpg" width="400" height="140" alt="splash" />
</div>

<div id="bild2">
<img src="bild.jpg" width="400" height="140" alt="splash" />
</div>

<div style="width: 500px;">
<p>Jag är lite text som inte kommer dras ihop även om browsern blir mycket mindre för min förälder är liksom typ lång nog och fast redan, tihi!</p>
</div>

<title>Untitled Document</title>
</head>
<body>
</body>
</html>

Gå till inlägget

För det första så ska din html kod ligga i <body> och inte i <head>
Och använder du % så baseras procenten på storleken på webbläsaren

Så om jag förstått dig rätt så vill du ha sidan så här? Bild, bild och text.

Problemet med din kod är som sagt att du använder procent och position: absolute som anpassar sig efter webbläsaren.

Lösningen hade varit att använda fasta mått. Ex. så här:
CSS:

#wrapper {
    width: 800px;
    margin: 0 auto;
}

#bild2 img {
    float: right;
}

HTML:

<div id="wrapper">
    <div>
        <img src="bild.jpg" width="400" height="140" alt="splash" />
    </div>
    <div id="bild2">
        <img src="bild.jpg" width="400" height="140" alt="splash" />
    </div>
    <div>
        <p>Jag är lite text som inte kommer dras ihop även om browsern blir mycket mindre för min förälder är liksom typ lång nog och fast redan, tihi!</p>
    </div>
</div>

#wrapper använder jag för centrera sidan och säga "så här stor ska sidan vara"
Då en div automatiskt blir liga bred som föräldern behövs ingen css på #splash
Vi get img elementet lite css för att få bilden att ligga till höger.
Den sista diven med text i har också auto width och blir således 800 pixlar bred som föräldern #wrapper

(disclaimer: har inte testat koden, måste upp och jobba om några timmar)

Visa signatur

Mina poster är en illusion. Det som står skrivet här över står i själva verket inte där så inget av det som du läser är sant. Inte ens den här texten. Jag har själv ingen kunskap om det jag skriver och ingen bör således läsa eller ta in den information som står skrivet.

Redigera
Citera flera Citera
Permalänk
Inaktiv
●
Skrivet av rumpnisse:

För det första så ska din html kod ligga i <body> och inte i <head>
Och använder du % så baseras procenten på storleken på webbläsaren

Så om jag förstått dig rätt så vill du ha sidan så här? Bild, bild och text.
http://data.fuskbugg.se/skalman02/4df54b136b663_sweclockers.p...

Problemet med din kod är som sagt att du använder procent och position: absolute som anpassar sig efter webbläsaren.

Lösningen hade varit att använda fasta mått. Ex. så här:
CSS:

#wrapper {
    width: 800px;
    margin: 0 auto;
}

#bild2 img {
    float: right;
}

HTML:

<div id="wrapper">
    <div>
        <img src="bild.jpg" width="400" height="140" alt="splash" />
    </div>
    <div id="bild2">
        <img src="bild.jpg" width="400" height="140" alt="splash" />
    </div>
    <div>
        <p>Jag är lite text som inte kommer dras ihop även om browsern blir mycket mindre för min förälder är liksom typ lång nog och fast redan, tihi!</p>
    </div>
</div>

#wrapper använder jag för centrera sidan och säga "så här stor ska sidan vara"
Då en div automatiskt blir liga bred som föräldern behövs ingen css på #splash
Vi get img elementet lite css för att få bilden att ligga till höger.
Den sista diven med text i har också auto width och blir således 800 pixlar bred som föräldern #wrapper

(disclaimer: har inte testat koden, måste upp och jobba om några timmar)

Gå till inlägget

Tack så mycket får jag säga, jag har inte skrivit koderna själva utan kopierat ifrån andra sidor osv, är inte så haj på css och div taggar.
Tack för ett bra svar!

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara