Links aren't functioning |
Links aren't functioning |
kinetickatie |
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? |
pandy |
Feb 17 2011, 02:24 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
The links work in the two browsers I tried.
|
kinetickatie |
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.
|
Frederiek |
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. |
pandy |
Feb 18 2011, 02:57 AM
Post
#5
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
Safari, I presume? Odd that the links aren't covered in gecko.
|
Frederiek |
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 , but the same thing happens in Firefox/Mac.
|
pandy |
Feb 18 2011, 01:48 PM
Post
#7
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
Not in K-Mel. Or maybe I used FF. One of them anyway.
|
Frederiek |
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. |
kinetickatie |
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
|
pandy |
Mar 2 2011, 02:12 PM
Post
#10
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
Try! You will be confident when you have finished your own layout and it works.
|
Frederiek |
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) |
Lo-Fi Version | Time is now: 29th March 2024 - 07:39 AM |