The links on this page: http://www.naiveglow.com/boysbirthdaywrappers.html will not work. I can't figure out why. In case you need it, here's my CSS:
*{
margin:0px;
padding:0px
}
img{border:0px}
html{
width:100%;
padding:10px 0 10px 0;
}
body{
width:746px;
margin:auto;
background-color: #ffe3e7;
}
#header{
float:left;
font-family:Tahoma;
font-size:11px;
color:#585858;
height:71px;
margin:0 0 200px 0
}
.feature {
text-align: center;
}
.feature2 {
text-align: center;
}
.lang{
float:left;
width:112px;
margin:10px 0 0 0;
padding:9px 20px 7px 60px;
border-right:1px solid #BABABA
}
.lang img{
padding:3px 0 3px 0;
margin:5px 0 0 0
}
#header .center{
padding:3px 9px 3px 10px;
margin:5px 10px 0 9px;
border-left:1px solid #BDBDBD;
border-right:1px solid #BDBDBD;
}
#belowheader{
margin:50px 50px 50px 50px;
}
.cur{
float:left;
width:120px;
margin:10px 0 0 0;
padding:9px 20px 7px 21px;
border-right:1px solid #BABABA
}
.cur select{
width:101px;
height:17px;
float:left;
border:1px solid #6E6E6E;
margin:7px 0 0 0;
font-family:Tahoma;
font-size:10px;
color:#6E6E6E;
font-weight:bold;
padding:1px 0 0 4px;
}
.cart{
float:center;
width:123px;
margin:10px 0 0 0;
padding:9px 28px 7px 20px;
background-image:url(images/cart.gif);
background-position:20px 4px;
background-repeat:no-repeat
}
.cart strong{
margin:0 0 15px 34px;
float:center
}
.cart font{
color:#C30205;
font-weight:bold;
font-size:11px
}
#menu{
float:left;
margin: 20px 0 0 0;
}
#menu li, #menu li img{
list-style-type:none;
float:left
}
#content{
float:left;
margin:4px 0 0 0;
width:200;
}
#content2 img {
margin: 0px auto;
}
#content2{
background-color:#FFFFFF;;
display:block;
text-align:center;
float:left;
width:350px;
margin: 36px 0px 0px 25px;
font-family:Tahoma;
height:350px;
border: solid 1px black;
}
#content3{
width:145px;
height:350px;
background-color:#FFFFFF;
float:left;
margin: 36px 0 0 10px;
font-family:tahoma;
border: solid 1px black;
padding: 0 4px 0 4px;
}
#content2a{
background-color:#FFFFFF;;
display:block;
text-align:center;
float:left;
position:relative;
left:100px;
width:350px;
margin: 36px 0px 0px 25px;
font-family:Tahoma;
height:450px;
border: solid 1px black;
}
#content3a{
width:350px;
height:295px;
background-color:#FFFFFF;
float:left;
position:relative;
left:115px;
top:60px;
margin: 36px 0 0 10px;
font-family:tahoma;
border: solid 1px black;
padding: 0 4px 0 4px;
}
#banner2{
margin: 0 0 0 230px;
float:center;
text-align:center;
position:relative;
top:580px;
}
#businesscards2{
float:right;
position:relative;
left:430px;
}
#suites1{
margin: 75px 0 0 25px;
float:left;
position:relative;
top:35px;
}
#suites2{
margin: 35px 0 0 25px;
float:left;
}
#suites3{
margin: 25px 0 0 37px;
float:left;
}
#suites4{
margin: 25px 0 0 25px;
float:left;
}
#suites5{
margin: 25px 0 0 37px;
float:left;
}
#suites6{
margin: 25px 0 0 25px;
float:left;
}
#suites7{
margin: 36px 0 0 37px;
float:left;
}
#content4 img{
margin: 0px auto;
}
#boyspage2{
float:center;
position:relative;
top:1100px;
}
#content4{
background-color:#FFFFFF;
display:block;
text-align:center;
float:left;
width:350px;
margin: 150px 0 0px 25px;
font-family:Tahoma;
height:350px;
border: solid 1px black;
}
#graphicflora{
background-color:#FFFFFF;
display:block;
text-align:center;
float:left;
width:500px;
font-family:Tahoma;
border: solid 1px black;
padding: 0 4px 15px 4px;
margin: 20px 0 0 30px;
}
#shoppingcart{
position:relative;
top:300px;
}
#graphicflora2{
background-color:#FFFFFF;
display:block;
text-align:center;
float:left;
position:relative;
top:15px;
width:500px;
font-family:Tahoma;
border: solid 1px black;
padding: 0 4px 15px 4px;
margin: 20px 0 0 30px;
}
#graphicflora3{
background-color:#FFFFFF;
display:block;
text-align:center;
float:left;
position:relative;
top:15px;
width:500px;
font-family:Tahoma;
border: solid 1px black;
padding: 0 4px 15px 4px;
margin: 20px 0 0 20px;
}
#graphicfloraimg{
float:center;
margin: 100px 0 20px 37px;
}
#graphicfloraimg2{
float:center;
position:relative;
top:35px;
left:70px;
}
#swirlycremeimg{
float:center;
margin: 100px 0 20px 37px;
}
#suites1{
float:left;
margin: 0 0 0 37px;
display:block;
}
#left{
float:left;
width:200px;
}
#left h2{
font-family:Tahoma;
font-size:11px;
color:#4F4D4D;
width:218px;
height:20px;
background-color:#EBE0DB;
display:block;
text-align:center;
padding:20px 0 12px 0;
}
#banner{
margin: 0 0 0 230px;
float:center;
text-align:center;
position:relative;
top:490px;
}
.leftnav{
display:block;
float:left;
width:192px;
padding:0px 10px 10px 10px;
margin:0 0 75px 0;
background-color:#F5EBE7;
height:790px;
border: solid 3px #EBE0DB;
}
.leftnav li{
list-style-type:none;
float:left;
width:100px;
background-image:url(images/arrows.gif);
background-position:10px 8px;
background-repeat:no-repeat;
padding:4px 0 0 35px;
}
.leftnav li a{
float:left;
font-family:Tahoma;
font-size:11px;
color:#000000;
text-decoration:none
}
#footer{
text-align:center;
float:center;
margin:35px 0 0 0;
padding:10px 0 0 0;
height:59px;
width:110%;
position:relative;
top:30px;
left:-50px;
}
#footer2{
text-align:center;
float:center;
margin:35px 0 0 0;
padding:10px 0 0 0;
height:59px;
width:110%;
position:relative;
top:400px;
left:-50px;
}
#footer3{
text-align:center;
float:center;
margin:35px 0 0 0;
padding:10px 0 0 0;
height:59px;
width:110%;
position:relative;
top:-480px;
left:-50px;
}
#footer4{
text-align:center;
float:center;
margin:35px 0 0 0;
padding:10px 0 0 0;
height:59px;
width:110%;
position:relative;
top:1175px;
left:100px;
}
.pay{
margin:30px 50px 0 13px;
float:center;
text-align:center;
}
#pay{
margin:10px 0 0 0;
float:center;
}
.copy{
float:center;
color:#626262;
font-family:Tahoma;
font-size:11px;
font-weight:bold;
}
.copy p{
width:500px;
text-align:center
}
.botmenu{
display:block;
float:left;
width:450px;
padding:10px 0 5px 35px
}
.botmenu li{
float:left;
list-style-type:none;
padding:0 10px 0 10px;
background-position:top right;
background-repeat:no-repeat;
}
.botmenu a{
color:#807F7F;
text-decoration:none;
float:left;
}
#footer .back{
background-image:none;
width:90px;
}
#footer p{
float:left
}
#footer p a{
float:left;
color:#626262;
text-decoration:none
}
#footer p .under{
text-decoration:underline
}
#content .inner_copy {border:0;color:#f00;float:left;width:50%!important;margin:-202px 0 0 0;overflow:hidden;line-height:0;padding:0;font-size:12px}
------
Any suggestions?
The links work in the two browsers I tried.
Hmm, thanks for taking a look pandy. Must be my computer.
No, the links on the left don't work, because most of them are covered by the #graphicfloraimg2 div.
Floats can only be left or right, not center. Float the div to the right, give it a width and adjust the left or right position. You probably need to adapt the #graphicflora3 div accordingly to fit the same width.
Safari, I presume? Odd that the links aren't covered in gecko.
Of course , but the same thing happens in Firefox/Mac.
Not in K-Mel. Or maybe I used FF. One of them anyway.
Anyway, I have the impression it has everything to do with the entire structure of the page, in which BTW there are errors ( http://www.htmlhelp.com/cgi-bin/validate.cgi?url=http%3A//www.naiveglow.com/boysbirthdaywrappers.html&warnings=yes&input=yes ).
I'm afraid you need to rethink the whole structure. What I often do to see what happens is declare a rule for all div's, giving them a red (or contrasting) outline. It's like turning on borders on tables. Then you'll see how the page is laid out.
I don't mean to discourage you, Katie, but once you have a good structure, you can use that on every page, which will avoid problems on individual pages.
I think I will redo my site, there's too many pages I've screwed up. Do you know of any good free layout sites where I can get a basic layout to modify? I'm not confident enough in my "skills" to build one from scratch
Try! You will be confident when you have finished your own layout and it works.
Good for you, Katie. Seems like a good decision.
- http://blog.html.it/layoutgala/ (40 basic downloadable CSS layouts)
- http://www.d.umn.edu/itss/training/online/webdesign/css.html (in particular in the section Positioning & Layout) (references, articles & tutorials on CSS, look around other parts of the webdesign training too)
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)