epic110Medlem sedan nov. 201127 inlägg Hallå!
Jag blir galen snart, har suttit alldeles för länge och försökt centrera min sida jag håller på o bygger. Nu bryter jag ihop och behöver hjälp, förstår inte varför det inte fungerar! Alla element ligger helt vänsterplacerade för tillfället, verkar inte som att containern gör sitt jobb. Nu är det lite javascript med i bilden oxå, kan det vara det som förstör?
<div id="container">
<div id="tumblr">
<a href="http://streetexpressionsnyheter.tumblr.com/" title="Nyhetsflöde" rel="shadowbox[Vacation]"><img src="galleri/tumblr_a.jpg" width="600" height="348" border="1" alt""></a>
</div>
<div id="text">
Under den här fliken hittar ni ett frekvent nyhetsflöde och fler uppdateringar om vad som händer!
</div>
<div id="footer"></div>
<div id="footertext">
INFO@STREETEXPRESSIONS.SE
</div>
</div>
#container {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#tumblr {
margin-top: 50px;
float: left;
opacity: 0.8;
}
#text {
float: left;
margin: 400px auto;
}
#footer {
background-image: url(dark.png);
width: 4000px;
height: 40px;
float: left;
position: fixed;
bottom: 0px;
left:0px;
z-index:5;
}
#footertext {
float: left;
position: fixed;
bottom: 4px;
z-index:6;
color: #3A4944;
font-family: arial;
font-size: 26px;
margin: 0px auto;
}
Vad har jag gjort fel och vad bör jag ändra för att få elementen centrerade? Jag är nybörjare så ni behöver inte bli arga :e
vilken doctype kör du?
margin-left + right har du på auto, den centrera #container, men om du vill centera bilder och text så räcker det att du kör text-align: center; och att du inte floatar elementen (gäller på #text)
epic110Medlem sedan nov. 201127 inlägg <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
Om det var det du menade? Simpel CSS + Html..
Okej, har sjukliga problem med att skapa en container/wrapper och sen centrera den. Det blir bara massa konstiga fel och ingen centrering uppstår.
Testar nu 100% width på alla element och text-alignt:center på det, närmre kommer jag inte. Men det ser ju ut som skit!
Skapar jag en wrapper blir den inte centrerad, utan lägger sig till vänster..
Ska testa att ta bort float på vissa grejjer!
ett block element är alltid 100% så länge du inte positonera den absolut/fixed så behöver du inte ändra width på den, den kommer ta width storleken på dess förälder.
http://jsbin.com/acirug/edit#javascript,html,live
om det är bilden och texten du vill centera (nu har du en margin på 600px på topp och botten på #text, vet inte om det är det du vill ha?)
epic110Medlem sedan nov. 201127 inlägg Okej, släpp allt med centreringen, har löst det! :)
Det jag undrar över nu är varför IE gör så här mot mig??
http://www.klotterfabriken.se/portfolio.html
Testar ni den sidan i IE och exempelvis Safari, så ser ni att rubriken "Tavlor" flyttar sig till höger i IE. Får inte bort problemet hur jag än gör, hur lösa??
Har en klockren webbsida som ser bra ut, men när jag laddar upp den till servern envisas många element med att bli förskjutna i IE. Ser bra ut i Safari och andra läsare..
IE visar inte heller opacitet jag har lagt på, vilket funkar i andra webbläsare.
<div id="container">
<div id="text">
Tavlor:
</div>
<div id="rad1">
<a href="galleri/train.jpg" title="Trainsurfing for freedom, 120x80cm, sprayfärg - Sebastian Gustafsson" rel="shadowbox[Vacation]"><img src="galleri/train_a.jpg" width="158" height="100" border="1" alt""></a>
<a href="galleri/frog.jpg" title="Benjamin, 40x50cm, oljefärg - Sebastian Gustafsson"rel="shadowbox[Vacation]"><img src="galleri/frog_a.jpg" width="108" height="100" border="1" alt""></a>
<a href="galleri/window.jpg" title="Fönster, 40x80cm, akrylfärg - Adrian Pettersson"rel="shadowbox[Vacation]"><img src="galleri/window_a.jpg" width="47" height="100" border="1" alt""></a>
<a href="galleri/titta.jpg" title="Titta på mig när jag rasar, 100x80cm, akrylfärg - Adrian Pettersson"rel="shadowbox[Vacation]"><img src="galleri/titta_a.jpg" width="74" height="100" border="1" alt""></a>
<a href="galleri/sociala.jpg" title="Sociala Medier, 30x50cm, akrylfärg - Adrian Pettersson"rel="shadowbox[Vacation]"><img src="galleri/sociala_a.jpg" width="53" height="100" border="1" alt""></a>
</div>
</div>
#container {
width: 650px;
margin-left:auto;
margin-right:auto;
}
#text {
margin-top: 30px;
color: #333;
font-family: tahoma, sans-serif;
font-size: 14px;
}
#rad1 {
margin-top: 50px;
float: left;
opacity: 0.8;
}
IE7 och IE8 har inte opacity har inte du få använda dig av filter för de läsarna:
filter: alpha(opacity=80); /* IE6-IE8 */
Sen kan du rensar en hel del på din sida, du behöver inte överdriva med att floatar och positionera alla dina element
#text räcker att du ha:
#text {
color: #333333;
font-family: tahoma,sans-serif;
font-size: 14px;
margin: 30px 0 10px;
}
och text-align: center vill du inte ha ser det ut som så plocka bort den
och #rad1 räcker det att du har opacity + filter på då #text lägger in 10px på botten marginalen.
Sen verka du köra samma koder ibland i shadowbox.css + portfolio.css filen räcker ju att du sätter reglen en gång.
epic110Medlem sedan nov. 201127 inlägg Okej, det förklarar ju en del, tack för filtret!
Ja, det där med vad som behöver float och inte är lite svårt tycker jag. Har testat lite olika, gäller det bara element som ska ligga bredvid varandra?
Har inte rört shadowbox.css än, så det kan ju faktiskt vara den som strular! Håller på och bygger om en gammal sida jag gjort innan, ska kika över det.
Känns inte som att IE borde strula med så här pass enkel kod egentligen, det är bra störande..
Det är inte HTML koden som strular( även om den är felaktig just nu) det är all din css som jag tycker du har gjort krångligare än vad du behöver göra
epic110Medlem sedan nov. 201127 inlägg Så där, nu har jag lyckats centrera sidan och footern, allt sitter som en smäck och jag är nöjd. Men när jag laddar upp sidan på servern envisas texter och bilder med att lägga sig bredvid varandra, antar att det är rätt enkelt, men jag vill göra rätt.
Ska jag sätta float eller hur borde jag göra? Wrappern är väl inte riktigt rätt inställd heller antar jag, någon som har lust att kika?
http://www.klotterfabriken.se/
du har ingen wrapper alls ser det ut som (om du inte har gjort något med body-elementet)
epic110Medlem sedan nov. 201127 inlägg Har tagit bort javascript-css nu så den filen stör inte ut de andra dokumenten längre, däremot förstår jag inte hur jag ska få tumblr, text och footertext att ligga centrerat. Wrappern verkar inte göra sitt jobb direkt, så vad är fel?
Hur göra?
<body>
\<div id="skugga"\>
\</div\>
\<div id="background"\>
\</div\>
\<div id="logo"\>
\<a href="http://streetexpressions.se/" title="Hem"\>\<img src="logo.png" width="57" height="100" border="0" alt""\>\</a\>
\</div\>
\<ul id="Meny"\>
\<li\>\<a href="info.html" class="info"\>info\</a\>\</li\>
\<li\>\<a href="justnu.html" class="justnu"\>justnu\</a\>\</li\>
\<li\>\<a href="portfolio.html" class="portfolio"\>portfolio\</a\>\</li\>
\<li\>\<a href="kontakt.html" class="kontakt"\>kontakt\</a\>\</li\>
\</ul\>
<div id="wrapper">
\<div id="tumblr"\>
\<a href="http://streetexpressionsnyheter.tumblr.com/" title="Nyhetsflöde" rel="shadowbox\[Vacation\]"\>\<img src="galleri/tumblr_a.jpg" width="600" height="348" border="1" alt""\>\</a\>
\</div\>
\<div id="text"\>
Under den här fliken hittar ni ett frekvent nyhetsflöde och fler uppdateringar om vad som händer!
\</div\>
</div>
\<div id="footer"\>\</div\>
\<div id="footertext"\>INFO@STREETEXPRESSIONS.SE\</div\>
</body>
</html>
body {
overflow: hidden;
}
#skugga {
background-image: url(skugga.png);
background-repeat: repeat-x;
width: 3000px;
height: 30px;
margin-top: 0px;
left:0px;
float: left;
position: fixed;
top: 0px;
z-index:10;
}
#background {
background-image: url(Mosaic_bakgrund_index.png);
background-repeat: repeat;
float: left;
width:3002px;
height:2000px;
position: fixed;
z-index: -20;
left: 0px;
top: 0px;
}
#logo {
margin-top: 350px;
margin-left: 40px;
position: fixed;
}
ul#Meny {
width: 140px;
height: 238px;
margin-top: 30px;
margin-right: 0px;
position:fixed;
left: 3px;
top: 60px;
z-index:1;
}
ul#Meny li {
display: inline;
}
ul#Meny li a {
display: block;
float: left;
width: 140px;
background-image: url(meny_ny_dubbel.png);
text-indent: -9999px;
}
ul#Meny li a.info {
height: 63px; background-position: 0 0;
}
ul#Meny li a.justnu {
height: 79px; background-position: 0 -63px;
}
ul#Meny li a.portfolio {
height: 37px; background-position: 0 -142px;
}
ul#Meny li a.kontakt {
height: 59px; background-position: 0 -179px;
}
ul#Meny li a.info:hover {
height: 63px; background-position: -140px 0px;
}
ul#Meny li a.justnu:hover {
height: 79px; background-position: -140px -63px;
}
ul#Meny li a.portfolio:hover{
height: 37px; background-position: -140px -142px;
}
ul#Meny li a.kontakt:hover {
height: 59px; background-position: -140px -179px;
}
a { outline: none; }
#wrapper {
width: 600px;
margin-left: auto;
margin-right: auto;
}
#tumblr {
margin-left: auto;
margin-right: auto;
margin-top: 100px;
}
#text {
margin-top: 20px;
color: #333;
font-family: tahoma, sans-serif;
font-size: 16px;
}
#footertext {
text-align: center;
color: #666;
font-family: tahoma, sans-serif;
font-size: 26px;
position:absolute;
bottom:0;
width:100%;
z-index: 6;
}
#footer {
background-image:url(dark.png);
width: 4000px;
height: 32px;
float: left;
position: fixed;
bottom: 0px;
left:0px;
z-index:5;
}
den gör ju exakt det du säger att den skall göra, du har satt body till:
body {
background-color: #FFFFFF;
height: 100%;
margin: 0 auto;
text-align: center;
width: 750px;
}
Så den centrera sig på föräldern och den är inte 100% av fönstret utan 750px
epic110Medlem sedan nov. 201127 inlägg Där ja! Nu sitter hela hemsidan som den ska, bara uppdatering av musikfliken som saknas, i övrigt är den färdig! Något jag bör tänka på så den fungerar ordentligt på sökmotorer osv? Har ställt in meta så gott jag kunnat..
https://www.streetexpressions.se
Kritik mottages gärna, kodmässigt orkar jag nog inte så mycket mer just nu, men layout o design vore intressant att höra. Har försökt mig på något lite annorlunda iaf..
Tack för all hjälp, på återseende!
