...

View Full Version : CSS - Code exceeds content.



cssnewbe
08-12-2011, 09:20 AM
Hey there! I really hope someone can help me. I am currently working on a site and the whole site is almost finished but i got a problem..

Ive found this cool css for pictures and its all going good but somewhere in the following code is something that exceeds my site. been trying to find out what it is but i cant find it.

its posted in the middle of the HTM. and exceeds to some extend below the bottum.

[CODE]
.gallerycontainer{
position: relative;
width: 550px;
height: 300px;
margin: 0px auto -1px auto;
}

.thumbnail img{
/*border: 1px solid white;*/
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
*/border: 1px solid blue;*/
}

.thumbnail span{
position: absolute;
/*background-color: lightyellow;*/
padding: 0px;
left: -1000px;
border: 1px #FFFFFF;
/*box-shadow:0px 0px 30px white;*/
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{
visibility: visible;
top: 0;
left: 230px;
z-index: 50;
}
[CODE]



Hope you can help. Me

SB65
08-12-2011, 10:08 AM
Can't help without a link to your page or the full html.

cssnewbe
08-12-2011, 10:14 AM
Ok here goes:


HTML

[Code]
<!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>Crossfire.no</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body bgcolor="#000000">

<div id="wrapper">
<div id="navMenu">
<ul>
<li><a href="enter.htm">Home</a>

<ul>
<li><a href="nyheter.htm">Nyheter</a></li>
<li><a href="kommersnart.htm">Kommer Snart</a></li>
</ul>
<!--end Inner UL-->
</li>
<!--en Main LI-->
</ul>
<!--end Main UL-->
<ul>
<li><a href="#">Media</a>

<ul>
<li><a href="playlist.htm">Spilleliste</a></li>
<li><a href="video.htm">Video</a></li>
</ul>
<!--end Inner UL-->
</li>
<!--en Main LI-->
</ul>
<!--end Main UL-->
<ul>
<li><a href="#">Opptreden</a>

<ul>
<li><a href="#">Bilder</a></li>
</ul>
<!--end Inner UL-->
</li>
<!--en Main LI-->
</ul>
<!--end Main UL-->
<ul>
<li><a href="#">Informasjon</a>

<ul>
<li><a href="#">Biografi</a></li>
<li><a href="#">Historie</a></li>
</ul>
<!--end Inner UL-->
</li>
<!--en Main LI-->
</ul>
<!--end Main UL-->
<ul>
<li><a href="#">About</a>

<ul>
<li><a href="design.htm">Designs</a></li>
<li><a href="specialthanks.htm">Spesiell Takk Til</a></li>
<li><a href="contact.htm">Kontakt</a></li>
</ul>
<!--end Inner UL-->
</li>
<!--en Main LI-->
</ul>
<!--end Main UL-->

<br class="clearFloat" />
</div>
</div><!--end navMenu-->
</div><!--end wrapper-->
<br />
<br />
<div id="box"> </div>

<div class="gallerycontainer">

<a class="thumbnail" href="#thumb"><img src="bryllupthumandpic/bryllupninethumb.png" width="100px" height="75px" border="0" /><span><img src="bryllupthumandpic/bryllupnine.png" /><br /></span></a>

<a class="thumbnail" href="#thumb"><img src="bryllupthumandpic/brylluptenthumb.png" width="100px" height="75px" border="0" /><span><img src="bryllupthumandpic/bryllupten.png" /><br /></span></a>

<br />

<a class="thumbnail" href="#thumb"><img src="bryllupthumandpic/bryllupeleventhumb.png" width="100px" height="75px" border="0" /><span><img src="bryllupthumandpic/bryllupeleven.png" /><br /></span></a>

<a class="thumbnail" href="#thumb"><img src="bryllupthumandpic/brylluptwelvethumb.png" width="100px" height="75px" border="0" /><span><img src="bryllupthumandpic/brylluptwelve.png" /><br /></span></a>

<br />

<a class="thumbnail" href="#thumb"><img src="bryllupthumandpic/bryllupthirteenthumb.png" width="100px" height="75px" border="0" /><span><img src="bryllupthumandpic/bryllupthirteen.png" /><br /></span></a>

<a class="thumbnail" href="#thumb"><img src="bryllupthumandpic/bryllupfourteenthumb.png" width="100px" height="75px" border="0" /><span><img src="bryllupthumandpic/bryllupfourteen.png" /><br /></span></a>

<br />

<a class="thumbnail" href="#thumb"><img src="bryllupthumandpic/bryllupfifteenthumb.png" width="100px" height="75px" border="0" /><span><img src="bryllupthumandpic/bryllupfifteen.png" /><br /></span></a>

<a class="thumbnail" href="#thumb"><img src="bryllupthumandpic/bryllupsixteenthumb.png" width="100px" height="75px" border="0" /><span><img src="bryllupthumandpic/bryllupsixteen.png" /><br /></span></a></div>
<div id="crossfirebutton"><a href="playlisttwo.htm"><img src="buttonnext.png" border="0" align="right" onmouseover="this.src='buttonnextbig.png'" onmouseout="this.src='buttonnext.png'" /></a></div>
</body>
</html>
[CODE]

And here is the CSS

[CODE]
@charset "utf-8";

h1 {
color:#FFFFFF;
font-size:12px;
font-family:Georgia, "Times New Roman", Times, serif;
}

h2 {
color:#FFFFFF;
font-size:12px;
font-family:Georgia, "Times New Roman", Times, serif;
}

h3 {
color:#ff0000;
font-size:14px;
font-family:Georgia, "Times New Roman", Times, serif;
}

h4 {
color:#99D2D7;
font-size:13px;
font-family:Georgia, "Times New Roman", Times, serif;
}

body
{
background-image:url('backgroundfullbody.png');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:top center;

}

#navMenu {
background:#fff;
border-top:4px solid #000;
margin:0;
padding:0;
}

#navMenu ul {
margin:0;
padding:0;
line-height:30px;
}

#navMenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background:#000000;
}

#navMenu ul li a {
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-style:oblique;
text-decoration:none;
height:30px;
width:150px;
display:block;
color:#FFFFFF;
border:1px solid #000000;
/** text-shadow:#FFFF99 1px 1px 1px ;**/
}

#navMenu ul ul li a {
font-style:italic;
font-weight:bold;
}

#navMenu ul ul {
position:absolute;
visibility:hidden;
top:32px;
display:inline;
}

#navMenu ul li:hover ul {
visibility:visible;
}

/***********************************************************/

#navMenu li:hover {
background:#460e0e;
}

#navMenu ul li:hover ul li a:hover {
background:#460e0e;
color:#ff0000;
}

#navMenu a:hover {
color:#ff0000;
}

.clearFloat {
clear:both;
margin:0;
padding:0;
}

/***********************************************************/

#wrapper {
width: 760px;
height: 30px;
margin: 0px auto -1px auto;
}

#box {
width: 760px;
height: 250px;
margin: 0px auto -1px auto;
}

#textbox {
width: 500px;
height: 236px;
margin: 0px auto -1px auto;
}

#textboxtwo {
width: 486px;
height: 236px;
margin: 0px auto -1px auto;
}

#container {
width: 510px;
height: 300px;
margin: 0px auto -1px auto;
}

#topboxnyheter {
width: 760px;
height: 225px;
margin: 0px auto -1px auto;
}

#listofsongs {
width: 254px;
height: 300px;
float: left;
}

#listofsongs2 {
width: 254px;
height: 300px;
float: right;
}

.clear {
clear:both;
}

#videolist {
width: 510px;
height: 50px;
margin: 0px auto -1px auto;
}


#crossfirebutton {
width: 533px;
height: 50px;
margin: 0px auto -1px auto;
}
/*****************Galery CSS********************/

.gallerycontainer{
position: relative;
width: 550px;
height: 325px;
margin: 0px auto -1px auto;
}

.thumbnail img{
/*border: 1px solid white;*/
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
/*border: 1px solid blue;*/
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
/*background-color: lightyellow;*/
padding: 0px;
left: -1000px;
border: 1px #FFFFFF;
/*box-shadow:0px 0px 30px white;*/
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
[CODE]


Sorry if it looks sloppy, Just letting you know all the other pages in my website works just fine. The blank Div is there to keep the background in order. Only the recent addition i mention before makes the blank space in the bottum.

vikram1vicky
08-12-2011, 12:20 PM
There is error in your css code. please check hightlighted one:



#navMenu ul li a {
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-styleblique;
text-decoration:none;
height:30px;
width:150px;
display:block;
color:#FFFFFF;
border:1px solid #000000;
/** text-shadow:#FFFF99 1px 1px 1px ;**/
}

cssnewbe
08-12-2011, 12:38 PM
Was just written close together, doesnt help with my problem tho -.-

SB65
08-12-2011, 01:30 PM
All I get is a black page with links - no obvious gaps - but then this may be the lack of images. Can you give a link to the live page instead?

You do have a mismatched div tag - check the w3c validator (http://validator.w3.org/).

[Also, please wrap your code with #tags - makes this page easier to navigate]

sunfighter
08-12-2011, 06:34 PM
The question here is this line:
"..somewhere in the following code is something that exceeds my site"

What exactly do you mean by 'exceeds my site'? What error are you getting? Is it the bandwidth? what size is the pictures? etc. Please give details.

cssnewbe
08-13-2011, 05:56 AM
Basically 'a blank space in the bottum' when i have the site on fullscreen. Im sorry the site is not online yet, will be soon, with errors. seems i have to do it over when i have done it, kinda stupid ive been matching the content to the background -.- lol im a sandboxer. been over 8 years since i made an 'html' site lol ah well gotta learn somehow right? I think i figured out the problem. I have a list of thumbnails that 'show' the image to the right side. and its looking alright i think that the code somehow sees the picture next to the thumbnail itsself first then looks at the disignated area. i now minimized the thumbnails a bit more so it shows better. and no blank space. but thank you guys for reading the post i made. this is a really helpfull forum, lots of soulfood xD



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum