Forum Mjukvara Programmering och digitalt skapande Tråd

Centrera sidan på all upplösningar. Hur?

1
Skriv svar
Permalänk
Inaktiv
●

Centrera sidan på all upplösningar. Hur?

Som titeln lyder så undrar jag hur jag får hemsidan centrerad på all upplösningar.

Min sida blir centrerad på skärm2 som kör 1280x1024 i upplösning.
Men på skärm1 som är 1920x1080 så kommer det en jätte lång bit åt höger som är tom.

Hur ska jag göra för att få allt att bli i center på all upplösningar?

Just nu så gör jag den i HTML & CSS så gärna något svar i det området.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

margin: 0 auto; på diven du vill centrera

Visa signatur

Hur kan syltkakor överleva i det vilda utan ögon?

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

margin: 0 auto; på diven du vill centrera

Gå till inlägget

så om jag gör en <div> som allting ligger i så skriver jag in det så blir det centrerat?
Allting på sidan ska vara centrerat.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Precis. Lägg en wrapper runt hela sdan. Sweclockers t.ex har en wrapper som heter "forumWrapper" där hela forumet ligger i (header och foote är 100% wide och ligger utanför). Sätt en width på elementet sen margin: 0 auto; så blir den centrerad.

Redigera
Citera flera Citera
Permalänk
Inaktiv
●

Tack så mycket
Nu är den centrerad

Jag undrar dock om ni kan hjälpa mig med ett annat problem?

Sidans titel bild ligger i sin egna div tag som är namnged "titel". Men när jag lägger en <a> tag runt om den så görs hela headern till en länk också :S
Jag vill liksom bara ha titeln.

<body>
<div id="wrapper">

<!--Allt ska va i den här diven-->


<!--Headern börjar här-->

<div id="header">

<!--Titeln ligger här-->

    <div id="title">
	</div>
	
<!--Här slutar titeln-->
    
    <!--Navigationen börjar här-->
   
    <div align="center" id="navigation">
    	
        <!--Info knappen-->
        <a href="#">
        <div id="info">
        </div>
        </a>
        
        <!--Foto knappen-->
        <a href="#">
        <div id="foton">
        </div>
        </a>
        
        <!--Reklam knappen-->
        <a href="#">
        <div id="reklam">
        </div>
        </a>

    </div>

</div>

	<!--Navigationen slutar här-->

<img id="picture" src="gfx/DSCN4943.jpg" />




</div>
</body>
</html>
Redigera
Citera flera Citera
Permalänk
Entusiast
●
Skrivet av Morpiha:

Tack så mycket
Nu är den centrerad

Jag undrar dock om ni kan hjälpa mig med ett annat problem?

Sidans titel bild ligger i sin egna div tag som är namnged "titel". Men när jag lägger en <a> tag runt om den så görs hela headern till en länk också :S
Jag vill liksom bara ha titeln.

<body>
<div id="wrapper">

<!--Allt ska va i den här diven-->


<!--Headern börjar här-->

<div id="header">

<!--Titeln ligger här-->

    <div id="title">
	</div>
	
<!--Här slutar titeln-->
    
    <!--Navigationen börjar här-->
   
    <div align="center" id="navigation">
    	
        <!--Info knappen-->
        <a href="#">
        <div id="info">
        </div>
        </a>
        
        <!--Foto knappen-->
        <a href="#">
        <div id="foton">
        </div>
        </a>
        
        <!--Reklam knappen-->
        <a href="#">
        <div id="reklam">
        </div>
        </a>

    </div>

</div>

	<!--Navigationen slutar här-->

<img id="picture" src="gfx/DSCN4943.jpg" />




</div>
</body>
</html>
Gå till inlägget

Om jag förstår dig rätt så vill du kunna klicka på headerbilden för att tex komma till index. Bilden i fråga är inlagd via css i en div tag och du lägger in denna div i en a tagg.
Om det är det du menar så måste du strukturera om. Först och främst, div är ett block element medan a är ett inline element, du kan stoppa en penna i en låda men du kan inte stoppa en låda i en penna, om du förstår vad jag dillrar om.
Så lägg din a tagg i diven och lägg in bilden som en img tagg i a taggen <a href="#"><img src="bild.jpg" width="300" height="200" alt="*beskrivning av bilden*"/>

En annan sak jag såg i din kod var använda det av align="center" i en div-tagg. Det är inte längre tillåtet eftersom all HTML och css ska separeras, och nu vet du ju hur man centrerar block objekt

För övrigt kan jag annonsera att min nya ärkefiende är auto correct efter att ha skrivigt HTML på en iPhone...

Skickades från m.sweclockers.com

Visa signatur

Mörkt tema till sweclockers | Taklampa med socket 1155

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

Om jag förstår dig rätt så vill du kunna klicka på headerbilden för att tex komma till index. Bilden i fråga är inlagd via css i en div tag och du lägger in denna div i en a tagg.
Om det är det du menar så måste du strukturera om. Först och främst, div är ett block element medan a är ett inline element, du kan stoppa en penna i en låda men du kan inte stoppa en låda i en penna, om du förstår vad jag dillrar om.
Så lägg din a tagg i diven och lägg in bilden som en img tagg i a taggen <a href="#"><img src="bild.jpg" width="300" height="200" alt="*beskrivning av bilden*"/>

En annan sak jag såg i din kod var använda det av align="center" i en div-tagg. Det är inte längre tillåtet eftersom all HTML och css ska separeras, och nu vet du ju hur man centrerar block objekt

För övrigt kan jag annonsera att min nya ärkefiende är auto correct efter att ha skrivigt HTML på en iPhone...

Skickades från m.sweclockers.com

Gå till inlägget

Ah okej
align coden som jag använde var ett simpelt misstag xD

Men tack så mycket för hjälpen 

<body>
<div id="wrapper">

<!--Allt ska va i den här diven-->


<!--Headern börjar här-->

<div id="header">

<!--Titeln ligger här-->

   <a href="#"><img id="header_bild" src="gfx/header.png" /> </a>
	
<!--Här slutar titeln-->
    
    <!--Navigationen börjar här-->
   
    <div id="navigation">
    	
        <!--Info knappen-->
        <a href="#">
        <div id="info">
        </div>
        </a>
        
        <!--Foto knappen-->
        <a href="#">
        <div id="foton">
        </div>
        </a>
        
        <!--Reklam knappen-->
        <a href="#">
        <div id="reklam">
        </div>
        </a>
	</div>
</div>

	<!--Navigationen slutar här-->

<img id="picture" src="gfx/DSCN4943.jpg" />




</div>

</body>
</html>
Redigera
Citera flera Citera
Permalänk
Entusiast
●

Du har glömt några div taggar i a taggar
Ett tips kan vara att validera sidan då och då på http://validator.w3.org/
Webbläsare är aldeles för snälla när dom läser kod, dom tolkar och lagar. Med validatorn kan du se till att allt är rätt från början, man lär sig mycket på det.
När du validerar kommer den bland annat säga till dig att du saknar alt attributet på dina img taggar, det är bara att kämpa på! Det är kul att se fler som får upp intresset för HTML

Skickades från m.sweclockers.com

Visa signatur

Mörkt tema till sweclockers | Taklampa med socket 1155

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

Du har glömt några div taggar i a taggar
Ett tips kan vara att validera sidan då och då på http://validator.w3.org/
Webbläsare är aldeles för snälla när dom läser kod, dom tolkar och lagar. Med validatorn kan du se till att allt är rätt från början, man lär sig mycket på det.
När du validerar kommer den bland annat säga till dig att du saknar alt attributet på dina img taggar, det är bara att kämpa på! Det är kul att se fler som får upp intresset för HTML

Skickades från m.sweclockers.com

Gå till inlägget

Är det ett måste att gå efter exakt hur det står där på "validator"?

Förresten! Är det någon som vet hur man ändrar storlek på bilderna i lightbox? När jag klickar på en bild så blir det skit stor och får inte plats på skärmen.
Eftersom original bilden har upplösningen 4752x2884.
Finns det kanske något script som gör att den anpassas för skärmen?
(Kändes onödigt att göra en ny tråd om detta.)

Redigera
Citera flera Citera
Permalänk
Medlem
●

Ett litet inlägg i debatten bara.

HTML5 ger numera stöd för att använda <A> taggar som BLOCK level element.

Så det är beroende på hur man vill arbeta.

Visa signatur

Fractal Design Arc Svart | MSI Z68A-GD55 G3 REV B3 | Intel® Core i7 2600K, 3.4GHz, 8MB | Corsair 16GB (4x4096MB) CL9 1600Mhz VENGEANCE LP | MSI GeForce GTX 670 | Phanteks PH-TC14PE CPU Cooler (vit) | Corsair Power Supply 650W TX M, Modular, ATX, PS/2 | SSD (okänd tillverkare) + 2 äldre SATA2 diskar på 750 Gb, 350 gb. | OS: Microsoft Windows 10 home.

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

Är det ett måste att gå efter exakt hur det står där på "validator"?

Förresten! Är det någon som vet hur man ändrar storlek på bilderna i lightbox? När jag klickar på en bild så blir det skit stor och får inte plats på skärmen.
Eftersom original bilden har upplösningen 4752x2884.
Finns det kanske något script som gör att den anpassas för skärmen?
(Kändes onödigt att göra en ny tråd om detta.)

Gå till inlägget

Inte allt kanske. Men större delen ska du följa.

Visa signatur

Car pc (bygglogg) | Fishtank server (galleri) | HTPC (galleri)

Redigera
Citera flera Citera
Permalänk
Entusiast
●
Skrivet av BlueEyes:

Ett litet inlägg i debatten bara.

HTML5 ger numera stöd för att använda <A> taggar som BLOCK level element.

Så det är beroende på hur man vill arbeta.

Gå till inlägget

Det är sant, men som default är det fortfarande ett inline element och särskilt nybörjare borde följa standarderna. Även om jag själv nästan alltid gör om det till block element när det gäller menyer, blir mycket snyggare så och man slipper använda listor till menyn

Skrivet av Morpiha:

Är det ett måste att gå efter exakt hur det står där på "validator"?

Förresten! Är det någon som vet hur man ändrar storlek på bilderna i lightbox? När jag klickar på en bild så blir det skit stor och får inte plats på skärmen.
Eftersom original bilden har upplösningen 4752x2884.
Finns det kanske något script som gör att den anpassas för skärmen?
(Kändes onödigt att göra en ny tråd om detta.)

Gå till inlägget

Jag skulle vilja säga att ja, om du vill ha en så snabb och problemfri sida som möjligt så ska du det. Du kan göra allting som du vill ha det och fortfarande få det att validera.
Vad gäller lightbox så har jag aldrig använt det men fungerar inte img taggens egna proportioner?

Visa signatur

Mörkt tema till sweclockers | Taklampa med socket 1155

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

Det är sant, men som default är det fortfarande ett inline element och särskilt nybörjare borde följa standarderna. Även om jag själv nästan alltid gör om det till block element när det gäller menyer, blir mycket snyggare så och man slipper använda listor till menyn

Jag skulle vilja säga att ja, om du vill ha en så snabb och problemfri sida som möjligt så ska du det. Du kan göra allting som du vill ha det och fortfarande få det att validera.
Vad gäller lightbox så har jag aldrig använt det men fungerar inte img taggens egna proportioner?

Gå till inlägget

Nej det funkar inte då jag ändrar så att bilden blir liten på själva sidan men lightboxen laddar den med original upplösningen.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Nu vet jag inte exakt hur man fixar det i lightbox, men shadowbox är uppbyggd kring lightbox. Prova byt till den. Där fungerar det att bilden ändrar storlek efter upplösning http://www.shadowbox-js.com/

Visa signatur

Flickr

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

Nu vet jag inte exakt hur man fixar det i lightbox, men shadowbox är uppbyggd kring lightbox. Prova byt till den. Där fungerar det att bilden ändrar storlek efter upplösning http://www.shadowbox-js.com/

Gå till inlägget

I <3 U!
Det funkar nu utan problem!
Behövde inte heller ändra något i varken CSS eller Javascripten (tackar gud för jag kan fan ingen javascript!)
Tack så mycket

Och tack även till andra andra som har hjälpt mig
Jag kommer troligtvis posta mer i den här tråden om jag får problem ^^

Redigera
Citera flera Citera
Permalänk
Inaktiv
●

En fråga bara.
När jag gör en sida där det är en massa bilder som jag har gjort mindre för att dom ska vara som knappar som aktiverar shadowboxen. Men när jag laddar sidan så laddar alla bilderna ungefär som att dom skrivs ut. Alltså dom laddar uppifrån och ner rätt sakta.
Hur ska jag göra för att detta inte ska hända?

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Morpiha:

En fråga bara.
När jag gör en sida där det är en massa bilder som jag har gjort mindre för att dom ska vara som knappar som aktiverar shadowboxen. Men när jag laddar sidan så laddar alla bilderna ungefär som att dom skrivs ut. Alltså dom laddar uppifrån och ner rätt sakta.
Hur ska jag göra för att detta inte ska hända?

Gå till inlägget

Är bildfilerna i sig så i den storlek de ska visas, eller har du ändrat storlek för visning i <img>-taggen? Hur stora är bilderna? Alltså i hårddiskutrymme och inte pixlar. Annars låter det som en slö uppkoppling (a la 56k-style)

Visa signatur

Desktop|i5 3570k(@4,4GHz)|Asus P8Z77-V|AMD 6950|12GB RAM|Crucial BX500 480GB|Manjaro|
Laptop|Lenovo T440s|i7|8GB RAM|Debian Jessie|
Server|Fujitsu Primergy TX1310|G1820|8GB RAM|15TB|Unraid|
Ring, lånad mail

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

Är bildfilerna i sig så i den storlek de ska visas, eller har du ändrat storlek för visning i <img>-taggen? Hur stora är bilderna? Alltså i hårddiskutrymme och inte pixlar. Annars låter det som en slö uppkoppling (a la 56k-style)

Gå till inlägget

Jag har endast ändrat storleken på dom i själva sidan. Inte hur stora dom ska vara i shadowboxen.
Bilderna ligger på lite olika. Men en av dom ligger på 5,95mb och har upplösningen 4808x3456

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Där har du problemet alltså.
För då måste sidan ändå ladda in hela bilden på runt 5mb.
Gör en thumbnail istället i den storleken du behöver. Låt oss säga 100x100 pixlar. sen länkar du från den till den "stora" bilden.

ex:

<a href="bild1-stor.jpg" rel="shadowbox"><img src="bild1-liten.jpg" /></a>
Visa signatur

Flickr

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

Där har du problemet alltså.
För då måste sidan ändå ladda in hela bilden på runt 5mb.
Gör en thumbnail istället i den storleken du behöver. Låt oss säga 100x100 pixlar. sen länkar du från den till den "stora" bilden.

ex:

<a href="bild1-stor.jpg" rel="shadowbox"><img src="bild1-liten.jpg" /></a>
Gå till inlägget

När jag ska göra en thumbnail av den ska jag göra det i photoshop då?
Eller finns det ett lättare sätt?

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Jag gör i photoshop när jag gör iaf.
Kanske finns lättare sätt, men inget jag vet iaf

Visa signatur

Flickr

Redigera
Citera flera Citera
Permalänk
Medlem
●

Om du har photoshop, gör det där. Annars finns det ett verktyg i paint som heter typ "resize" genom vilket du kan ändra till önskad storlek...

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

Jag gör i photoshop när jag gör iaf.
Kanske finns lättare sätt, men inget jag vet iaf

Gå till inlägget

Hur många px rekommenderar du att en thumbnail ska vara? Får ju liksom inte vara för lite. Man måste kunna se vad som är på bilderna.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Det som passar sidan så klart, det bestämmer du ju själv.
Sen behöver du ju inte bara förminska bilden.

Utan du kan ju göra ett nytt ps dokument på låt oss säga 150x100px, och i den drar du in bilden och ändrar storlek tills du får med något fint i bilden.

Ex:
Tumbnail:

Stor bild:

Visa signatur

Flickr

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