webForumDet fria alternativet
Logga in

Problem med centrering av ikoner på webbsida

2 svar · 1 136 visningar · startad av nigge

niggeMedlem sedan feb. 2002199 inlägg
#1

Hej!

Jag har "lånat" en template från nätet och försöker fixa lite med den mest för att lära mig... men har stött på ett problem
Det är så att det är 3 st "ikoner" som jag vill flytta ner till footern på sidan från contentdelen...
Det fungerar att göra på samtliga sidor förutom en sida där jag har flashvisning av bilder(klickar man på bilderna så poppar dom upp i ett nytt fönster).
Problemet som uppstår är att ikonerna blir vänster-allignade istället för centrerade i footern, jag har kopierat koden från de sidorna där ikonerna hamnar rätt men det fungerar ändå inte. Kan någon som har bättre koll på css och html kolla igenom och se om ni hittar något som kan vara felet?
börjar med att bifoga html-koden för den aktuella sidan:

<!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>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Metamorphosis Design Free Css Templates</title>
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <link href="styles.css" rel="stylesheet" type="text/css" media="screen" />
<!-- Begin JavaScript -->

		<script type="text/javascript" src="lib/jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="lib/jquery.tools.js"></script>
    	<script type="text/javascript" src="lib/cufon.js"></script>
    	<script type="text/javascript" src="lib/jquery.custom.js"></script>

<!-- Pirobox setup and styles -->

<script type="text/javascript" src="lib/pirobox.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$().piroBox({
			my_speed: 400, //animation speed
			bg_alpha: 0.1, //background opacity
			slideShow : false, // true == slideshow on, false == slideshow off
			slideSpeed : 4, //slideshow duration in seconds(3 to 6 Recommended)
			close_all : '.piro_close,.piro_overlay'// add class .piro_overlay(with comma)if you want overlay click close piroBox

	});
});
</script>

<link href="images/style.css" rel="stylesheet" type="text/css" /> 

<!-- Pirobox setup and styles end-->
    </head>
    <body>
        <div id="footer_bg">
            <div id="wrap">
                <div id="logo">
                    <h1><a href="#">metamorph_simplified</a></h1>
                    <a href="#"><small>Company Slogan Goes Here</small></a>
                </div>

                <div id="header">
                    <div id="menu">
                        <ul>
                            <li><a href="index.html">Hem</a></li>
                            <li><a href="gallery.html">Bildgalleri</a></li>
                            <li><a href="lisence.html">Redigera bilder</a></li>
                            <li><a href="lisence.html">Våra tjänster</a></li>
                            <li><a href="contact.html">Om oss</a></li>
                            <li><a href="contact.html">Kontakta oss</a></li>
                        </ul>
                    </div>
                    <div id="header_bg">
						<div id="slider_bg">
								<div class="waveshow">
									<img src="images/header.png" alt="" title="Köp bilder" />
									<img src="images/header2.png" alt="" title="Redigera bilder" />
									<img src="images/header3.png" alt="" title="Anlita fotografer" />								
								</div> <!-- waveshow -->
							</div> <!-- slider_bg -->
					</div>
                </div>
                <div style="clear: both; padding-top: 17px;"></div>

                <div id="content">
                    <div class="content_top"></div>
                    <div class="content_bg">

                        <div class="col3">
                            <div class="col1_3">
                                <h1>Bilder</h1>
                                <a href="images/fullsize/DSC_0034.jpg"  class="pirobox_gal1" title="Bild 1"><img src="images/thumbs/DSC_0034.jpg" width="277" height="154" title="" /></a>
                                <p>Lite text</p>
                            </div>
                            <div class="col2_3">
                                <h1>Bilder</h1>
                                <a href="images/fullsize/DSC_0113.jpg" class="pirobox_gal1" title="Bild 2"><img src="images/thumbs/DSC_0113.jpg" width="277" height="154" title="" /></a>
                                <p> Lite text</p>
                            </div>
                            <div class="col3_3">
                                <h1>Bilder</h1>
                                <a href="images/fullsize/DSC_0465.jpg" class="pirobox_gal1"  title="Bild 3"><img src="images/thumbs/DSC_0465.jpg" width="277" height="154" title="" /></a>
                                <p>Lite text</p>
                            </div>
                            <div style="clear: both"></div>
                        </div>
                        <div class="white_hr_gal"></div>
                        <div class="col3">
                            <div class="col1_3">
                                <h1>Bilder</h1>
                                <a href="images/fullsize/dsc_0034.jpg"  class="pirobox_gal1" title="Bild 1"><img src="images/thumbs/DSC_0034.jpg" width="277" height="154" title="" /></a>
                                <p>Lite text</p>
                            </div>
                            <div class="col2_3">
                                <h1>Bilder</h1>
                                <a href="images/fullsize/dsc_0113.jpg" class="pirobox_gal1" title="Bild 2"><img src="images/thumbs/DSC_0113.jpg" width="277" height="154" title="" /></a>
                                <p> Lite text</p>
                            </div>
                            <div class="col3_3">
                                <h1>Bilder</h1>
                                <a href="images/fullsize/dsc_0465.jpg" class="pirobox_gal1"  title="Bild 3"><img src="images/thumbs/DSC_0465.jpg" width="277" height="154" title="" /></a>
                                <p>Lite text</p>
                            </div>
                           
                            <div style="clear: both"></div>
                        </div>
                        <div class="white_hr_gal"></div>
                        
                            <div style="clear: both"></div>
                        </div>

                        <div style="clear: both;"></div>
                    </div>
                    <div class="content_bot"></div>
                </div>

               <div class="foot_col">
                    <div id="column_box">
                    <div class="column1">
                        <div class="column_title">
                            <h1>Some Company Header</h1>
                        </div>
                        <div class="col_text">
                            <img src="images/img_col1.png" alt="" title="" style="float: left; padding-top: 10px; padding-left: 20px; padding-right: 10px; padding-bottom: 10px;"/>
                          <p>&nbsp;</p><br />
                            <div class="read"></div>
                        </div>
                    </div>
                    <div class="column2">
                        <div class="column_title">
                            <h1>Some Company Header</h1>
                        </div>
                        <div class="col_text">
                            <img src="images/img_col2.png" alt="" title="" style="float: left; padding-top: 30px; padding-left: 2px; padding-right: 8px; padding-bottom: 10px;"/>
                          <p>&nbsp;</p><br />
                            <div class="read"></div>
                        </div>
                    </div>
                    <div class="column3">
                        <div class="column_title">
                            <h1>Some Company Header</h1>
                        </div>
                        <div class="col_text">
                            <img src="images/img_col3.png" alt="" title="" style="float: left; padding-top: 10px; padding-left: 2px; padding-right: 8px; padding-bottom: 10px;"/>
                          <p>&nbsp;</p><br />
                            
                        </div>
                    </div>
                </div>
                    <!-- Please DO NOT remove the following notice --><p>Design by <a href="http://www.metamorphozis.com/" title="Flash Templates">Flash Templates</a>, coded by <a href="http://www.flashtemplatesdesign.com/" title="Flash Web Templates">Flash Web Templates</a></p><!-- end of copyright notice-->
                </div>
            </div>
        </div>
    </body>
</html>

Det är det här stycket som innehåller ikonerna jag har problem med, dessa hamnar alltså längst till vänster istället för i mitten som de gör på de övriga sidorna jag testat

 <div class="foot_col">
                    <div id="column_box">
                    <div class="column1">
                        <div class="column_title">
                            <h1>Some Company Header</h1>
                        </div>
                        <div class="col_text">
                            <img src="images/img_col1.png" alt="" title="" style="float: left; padding-top: 10px; padding-left: 20px; padding-right: 10px; padding-bottom: 10px;"/>
                          <p>&nbsp;</p><br />
                            <div class="read"></div>
                        </div>
                    </div>
                    <div class="column2">
                        <div class="column_title">
                            <h1>Some Company Header</h1>
                        </div>
                        <div class="col_text">
                            <img src="images/img_col2.png" alt="" title="" style="float: left; padding-top: 30px; padding-left: 2px; padding-right: 8px; padding-bottom: 10px;"/>
                          <p>&nbsp;</p><br />
                            <div class="read"></div>
                        </div>
                    </div>
                    <div class="column3">
                        <div class="column_title">
                            <h1>Some Company Header</h1>
                        </div>
                        <div class="col_text">
                            <img src="images/img_col3.png" alt="" title="" style="float: left; padding-top: 10px; padding-left: 2px; padding-right: 8px; padding-bottom: 10px;"/>
                          <p>&nbsp;</p><br />
                            
                        </div>
                    </div>
                </div>

Jag biffogar även css filen(obs. jag använder samma css fil för de sidorna som det fungerar bra med.

/*
Design by Metamorphosis Design
http://www.metamorphozis.com
Released for free under a Creative Commons Attribution 2.5 License
*/

*{
    margin: 0px;
    padding: 0px;
}

img{
    padding: 0px;
    border: none;
}

a{
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
}

a:hover {
    text-decoration: none;
    color: #ffffff;
}

h1{
    font-family: Arial,Helvetica,sans-serif;
    font-size: 18px;
    font-weight: normal;
    color: #c96e11;
}

h2{
    font-family: Arial,Helvetica,sans-serif;
    font-size: 18px;
    color: #ffffff;
    font-weight: normal;
    text-align: center;
    background: url(images/menu_bg.png) repeat-x bottom;
    padding-bottom: 3px;
}

h3{
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    font-weight: normal;
    color: #c96e11;
}

h4{
    font-family: Arial,Helvetica,sans-serif;
    font-size: 18px;
    color: #c96e11;
    font-weight: bold;
    padding-bottom: 5px;
}

html{
    height: 100%;
}

body {	
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 20px;
    color: #ffffff;
    background: #000000 url(images/bg_top.jpg) no-repeat top center;
    height: 100%;
}

.ls{
    list-style: none;
    padding-left: 0px;
}

.ls li{
    background: url(images/ls.png) no-repeat 0px 6px;
    margin-bottom: 4px;
    padding-left: 15px;
}

#wrap{
    min-height: 540px;
    width: 957px;
    margin: 0 auto;
}

/*logo*/
#logo{
    height: 85px;
    padding-left: 660px;
    padding-top: 30px;
}

#logo h1 {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 16px;
    color: #ffffff;
    font-style: italic;
    font-weight: normal;
}

#logo small {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    color: #ffffff;
    font-style: italic;
    font-weight: normal;
}

#logo a{
    text-decoration: none;
}

/*Menu*/

#menu{
    width: 225px;
    float: left;
}

#menu ul {
    padding-left: 0px;
    list-style: none;
}

#menu ul li a{
    font-family: Arial,Helvetica,sans-serif;
    font-size: 24px;
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
    padding-left: 10px;
    display: block;
    background: url(images/menu_bg.png) repeat-x bottom;
    height: 25px;
    padding-top: 20px;
}

#menu ul li a:hover, #menu ul li .active{
	/*text-align: left;*/
}

/*header*/

#header{
    
}

#header_bg{
    width: 725px;
    height: 234px;
    float: right;
}

.column1 p, .column2 p, .column3 p{
    color: #2e2e2e;
    line-height: 14px;
}

.column1 a, .column2 a, .column3 a{
    text-decoration: none;
    font-weight: bold;
    color: #2e2e2e;
}

.col_text{
    padding-right: 10px;
    
}

.column1, .column2, .column3{
    background: url(images/top_box.jpg) no-repeat top left;
    width: 317px;
    height: 219px;
    float: left;
}

.column1, .column2{
    padding-right: 3px;
}

.column_title{
    text-align: center;
    padding-top: 10px;
    padding-bottom: 15px;
}

.read{
    padding-top: 5px;
}

.read a{
    background: url(images/read.png) ;
    width: 80px;
    height: 23px;
    color: #ffffff;
    font-weight: normal;
    display: block;
    float: right;
    padding-left: 30px;
}

/*content*/

#content{

}

#content h1{
    padding-bottom: 10px;
}
.content_top{
    background: url(images/content_top.png) no-repeat top left;
    height: 11px;
}

.content_bg{
    background: url(images/content_bg.png);
}

.content_bot{
    background: url(images/content_bot.png) no-repeat top left;
    height: 11px;
}

/*footer*/

#footer_bg{
    background: url(images/footer.jpg) no-repeat bottom center;
    min-height: 100%;
}

.foot_col{
    padding-top: 20px;
}

.foot_col1, .foot_col2, .foot_col3{
    float: left;
    width: 230px;
    padding-left: 66px;
}

.foot_col1 .foot_pad{
    padding-top: 5px;
}

.foot_col3 .foot_pad, .foot_col2 .foot_pad{
    padding-left: 40px;
    padding-top: 17px;
}

.link1{
    background: url(images/link1.png) no-repeat 0px 2px;
    padding-left: 30px;
    min-height: 18px;
    padding-bottom: 10px;
}

.link2{
    background: url(images/link2.png) no-repeat 0px 2px;
    padding-left: 30px;
    min-height: 18px;
    padding-bottom: 10px;
}

.link3{
    background: url(images/link3.png) no-repeat 0px 2px;
    padding-left: 30px;
    min-height: 18px;
    padding-bottom: 10px;
}

.link4{
    background: url(images/link4.png) no-repeat 0px 2px;
    padding-left: 30px;
    min-height: 18px;
    padding-bottom: 10px;
}

.footer_border_bot{
    clear: both;
    background: url(images/footer_border_bot.png) no-repeat center;
    height: 1px;
}

#footer{
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
}

/*index*/

.index_content_bg{
    background: url(images/index_content_bg.png) repeat-y center;
}

.index_content_left{
    padding-left: 20px;
    padding-right: 25px;
    float: left;
    width: 600px;
}

.index_content_right{
    padding-left: 20px;
    padding-right: 10px;
    float: left;
    width: 280px;
}

/*gallery*/

.col1_3, .col2_3{
    width: 277px;
    float: left;
    padding-right: 35px;
    padding-left: 10px;
}

.col3_3{
    width: 264px;
    float: left;
}

.col3{
    margin-left: 10px;
    margin-right: 10px;
    padding-bottom: 20px;
}

.col3 img{
    padding-top: 10px;
    padding-bottom: 10px;
}

.col3 p{
    padding-left: 10px;
    padding-right: 10px;
}

.col3 h1{
    text-align: center;
}

.white_hr_gal{
    background: url(images/menu_bg.png) repeat-x top;
    height: 10px;
    margin-left: 20px;
    margin-right: 25px;
}

/*lisence*/

.lisence_content_right{
    padding-left: 20px;
    padding-right: 20px;
    float: left;
    width: 270px;
}

.white_hr{
    margin-top: 10px;
    background: url(images/menu_bg.png) repeat-x top;
    height: 10px;
}

/*about*/

.about h1{
    margin-bottom: 10px;
}

/*contact*/
.contact{
    padding-left: 20px;
    width: 538px;
}

.contact_content_bg{
    background: url(images/contact_bg.png) repeat-y center;
}

.contact_content_left{
    padding-left: 20px;
    padding-right: 25px;
    float: left;
    width: 625px;
}

.contact_content_right{
    padding-left: 20px;
    padding-right: 10px;
    float: left;
    width: 255px;
}

#contact_form fieldset {
	border: none;
        padding-top: 10px;
}

#contact_form label {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #505050;
	text-align:left;
	padding-left: 10px;
}

#contact_form input {
	margin-bottom: 5px;
}

#contact-submit{
	width: 110px;
	height: 23px;
        color: #ffffff;
	background: url(images/submit.png);
	background-repeat:no-repeat;
	background-position:left top;
	border: none;
	float:right;
        font-size: 14px;
        font-weight: bold;
        text-transform: uppercase;
}

#con_name, #con_email, #con_website {
	width: 516px;
	height: 20px;
	padding-top: 0px;
	padding-left: 10px;
	padding-right: 12px;
	border: none;
	background: url(images/contact_input.png);
	background-repeat:no-repeat;
	background-position:left top;
	color: #000000;
	padding-bottom: 5px;
}

#con_mess {
	width: 518px;
	height: 166px;
	padding-top: 4px;
	padding-left: 10px;
	padding-right: 10px;
        padding-bottom: 15px;
	border: none;
	background: url(images/contact_message.png);
	background-repeat:no-repeat;
	background-position:left top;
	color: #000000;
        margin-bottom: 10px;
}

.orange{
    color: #c96e11;
}

/* Header Scroll */

.nivoSlider { position:relative;}
.nivoSlider img { position:absolute; top:0px; left:0px;}
.nivoSlider a.nivo-imageLink { position:absolute; top:0px; left:0px; width:100%; height:100%; border:0; padding:0; margin:0; z-index:60; display:none;}
.nivo-slice { display:block; position:absolute; z-index:50; height:100%; }
.nivo-caption {	position:absolute; left:0px; bottom:0px;  color:#000; width:100%; z-index:89; padding-left: 10px; font-weight: bold}
.nivo-caption p { padding:10px 5px; margin:0;}
.nivo-directionNav a {position:absolute; width:45px; height: 60px; top:41%; z-index:99; cursor:pointer; text-indent:-9999%;}
.nivo-prevNav { background-position: left bottom; left:20px; background:url(images/top_left.png) no-repeat;}
.nivo-nextNav { background-position: left top; right: 0px; background:url(images/top_right.png) no-repeat;}
.nivo-controlNav { bottom:-20px; position:absolute; right:0;}
.nivo-controlNav a { float:left; width:14px; height:14px; display:block; position:relative; z-index:99;	cursor:pointer; text-indent:-9999%; background:url(images/scroll_small.png) no-repeat scroll right top;}
.nivo-controlNav a.active {	background-position:left top; margin-top:-1px;}

Det blev väldigt mycket text, hoppas någon orkar läsa och komma med något förslag!:) isåfall är ni väl värda dagens grogg!
:bire

aronMedlem sedan mars 2004485 inlägg
#2
<img src="images/img_col1.png" alt="" title="" [B]style="float: left; padding-top: 10px; padding-left: 20px; padding-right: 10px; padding-bottom: 10px;"[/B]/>

Hej

Kollade på stycket du hade problem med och du har inline style som används i stället för det i den externa css filen, det är det som C:et i CSS står för :P. Men ja float:left gör så det kommer till vänster... Jämför med sidorna som det funkar på.

niggeMedlem sedan feb. 2002199 inlägg
#3

Hej Aron! Tack för ditt svar!

Det där stycket du bifogade

<img src="images/img_col1.png" alt="" title="" style="float: left; padding-top: 10px; padding-left: 20px; padding-right: 10px; padding-bottom: 10px;"/>

Finns även på de sidorna som fungerar så det är nog inte det som är felet verkar det dessvärre som :OO

Jag blir snart rådvill här:-p

Någon som har någon annan idé?
så är ni snart förtjänta av två groggar :bire :bire

137 ms totalt · 3 externa anrop · v20260731065814-full.30151723
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
134 ms — hämta tråd, inlägg och bilagor (db)