The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Links aren't functioning
kinetickatie
post Feb 17 2011, 02:05 PM
Post #1


Member
***

Group: Members
Posts: 32
Joined: 8-February 11
Member No.: 13,807



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 17 2011, 02:24 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,768
Joined: 9-August 06
Member No.: 6



The links work in the two browsers I tried.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
kinetickatie
post Feb 17 2011, 07:33 PM
Post #3


Member
***

Group: Members
Posts: 32
Joined: 8-February 11
Member No.: 13,807



Hmm, thanks for taking a look pandy. Must be my computer.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Feb 18 2011, 02:30 AM
Post #4


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 18 2011, 02:57 AM
Post #5


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,768
Joined: 9-August 06
Member No.: 6



Safari, I presume? Odd that the links aren't covered in gecko.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Feb 18 2011, 12:48 PM
Post #6


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



Of course biggrin.gif , but the same thing happens in Firefox/Mac.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 18 2011, 01:48 PM
Post #7


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,768
Joined: 9-August 06
Member No.: 6



Not in K-Mel. Or maybe I used FF. One of them anyway.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Feb 19 2011, 04:25 AM
Post #8


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



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.c...s&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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
kinetickatie
post Mar 2 2011, 01:55 PM
Post #9


Member
***

Group: Members
Posts: 32
Joined: 8-February 11
Member No.: 13,807



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 smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 2 2011, 02:12 PM
Post #10


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,768
Joined: 9-August 06
Member No.: 6



Try! You will be confident when you have finished your own layout and it works. happy.gif

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Mar 3 2011, 02:51 AM
Post #11


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



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)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 24th November 2017 - 04:13 AM