problem with gap between 2 vertical divs

6 replies [Last post]

Sat, 2010-07-17 15:07

km1kze

Offline

newbie

Timezone: GMT+3

Joined: 2010-07-17

Posts: 4

Points: 5

Hello,

I have a problem that bothers me from some days now, and I can't figure what is happening.

In the image below, is my layout, with an unwanted gap in the middle (before part of the image). I want to look like in "After" part of the image , stiched with that iframe div. I've attached the sources in this link: http://www.box.net/shared/4qgiq6zplj
I really tried all the posibilities, including position:absolute and relative but with no succes...

Thank you in advance!

Tags:

Beginners CSS Questions

Mon, 2010-07-19 11:44

thepineapplehead

Offline

Guru

Joined: 2004-06-30

Posts: 9649

Points: 778

Post your HTML and CSS here,

Post your HTML and CSS here, in CODE tags, very few of us download files of the internet to view.

Also, why are you using an iframe?

Verschwindende wrote:

CSS doesn't make pies

Sun, 2010-07-25 17:46

km1kze

Offline

newbie

Timezone: GMT+3

Joined: 2010-07-17

Posts: 4

Points: 5

sorry for the double post,

sorry for the double post, I've edited in the last minute, and somehow it posted two times the same message

Thu, 2010-08-19 17:26

km1kze

Offline

newbie

Timezone: GMT+3

Joined: 2010-07-17

Posts: 4

Points: 5

Hello, thansk for the reply;

Hello, thanks for the reply; i use iframe because I have many images to load (and that means many htmls for every image). So, I used an iframe that sends only to one html file with all the images in it. Then, I show the image in the iframe with an anchor specified in the images' html.

This is the 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" xml:lang="en" lang="en">
 
<head>
 
<title></title>
 
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<meta name="copyright" content="" />
<meta name="author" content="" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="index, follow, noarchive" />
<meta name="googlebot" content="noarchive" />
 
<link rel="stylesheet" type="text/css"  href="css/main.css" />
</head>
 
<body>
 
<div id="wrap">
<div id="cont" >
	<div id="container">
			<div id="previewBody">
				<div id="frame">
					<iframe src ="yt1.html" width="656" height="450" marginheight="0" marginwidth="0" scrolling="no" name="mainframe" frameborder="0">
						<p>Your browser does not support iframes.</p>
					</iframe>
				</div>
			</div>	
 
			<div id="about" >
			<img src="images/button_about.jpg" alt="" width="35" height="26" />
 
			</div>
			<div id="cv" >
				<img src="images/button_cv.jpg" alt="Curriculum Vitae" width="35" height="26" />
			</div>
	</div>
 
 
	</div>
 
	<div id="menuSide">
		<div id="menu">
	</div>
	</div>
 
 
 
</div>
 
	<div id="container2">	
		<div id="thumbs">
				<a target="mainframe" href="images/testFrame.jpg">
					<img src="images/t_testFrame.jpg" alt="thumb test frame" width="60" height="60" />
				</a>
								<a target="mainframe" href="images/testFrame.jpg">
					<img src="images/t_testFrame.jpg" alt="thumb test frame" width="60" height="60" />
				</a>
								<a target="mainframe" href="images/testFrame.jpg">
					<img src="images/t_testFrame.jpg" alt="thumb test frame" width="60" height="60" />
				</a>
		</div>
	</div>
 
</body>
</html>

This is the CSS code:

body {
	font: 12px/170% 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;
	color: #91807F; 
	margin: 0; padding: 0;
	margin-top: 0px;
	text-align: center;
	background-color: #3c3f4e;
}
 
a.link {  }
a.hover {  }
a.visited {  }
 
img {
	background-color: #150e0b;
	border: 2px solid #261b15;	
}
 
#wrap {
	width: 100%;
	height: 100%;
	margin: 0 auto;
	text-align: right;	
	background-color: #0a0b0d;
	border: 0px solid #ffffff; 		
}
 
#cont {
clear:both;
	height: 400px;
	width: 834px;
	margin: 0 auto;
	background-color: #0a0b0d;
	border: 0px solid #ffffff; 	
	}
 
#container {
 
	height: 460px;
	width: 834px;
	margin: 0 auto;
	padding: 0px;
	background-color: #0a0b0d;
	border: 0px solid #ffffff; 		
}
 
 
#previewBody {
	clear: both;
	height: 460px;
	width: 685px;
	margin: 0 auto;
	text-align: center;	
	border: 0px solid #ffffff;
		background: #3c3f4e url(../images/imagePreviewBox_Top.jpg) no-repeat ;
 
}
 
#frame { clear:both; padding: 0px; position:relative; top: 10px;}
 
#about {
	float:right;
	height: 26px;
	width: 35px;
	border: 0px solid #ffffff;
}
 
#cv {
	float:right;
	height: 26px;
	width: 35px;
	border: 0px solid #ffffff;
}
 
#menuSide {
	clear: both;
	height: 125px;
	width: 100%;
	margin: 0 auto;
	border: 0px solid #ffffff;
	background: #21242b url(../images/menuSideFill.jpg) repeat-x ;
 
}
 
#menu {
 
	height: 125px;
	width: 1024px;
	margin: 0 auto;
	text-align: right;	
	border: 0px solid #ffffff;
	background: #21242b url(../images/menu.jpg) no-repeat ;
}
 
#container2 {
	clear: both;
	height: 100%;
	width: 100%;
	margin: 0 auto;
	background-color: #3c3f4e;
	border: 0px solid #ffffff; 
 
	}
 
#thumbs { 
	clear:both;
	height: 100%;
	width: 685px;
	margin: 0 auto;
	border: 0px solid #ffffff;
	background-color: #3c3f4e;
 
}
 
#thumbs img	{ margin: 1px;}
#thumbs img:hover	{ border: 2px solid #ffffff; }
#thumbs img:visited	{ border: none; }
#about img  { position: relative; bottom:28px; left: 5px; }
#cv img  { position: relative; bottom:28px; left: 0px; }
 
.clear {	display:inline-block; }

Mon, 2010-07-26 12:02

thepineapplehead

Offline

Guru

Joined: 2004-06-30

Posts: 9649

Points: 778

IFrames are highly

IFrames are highly unnecessary. I'm not sure I understand the need for one in this situation - there are hundreds of photo gallery solutions available that don't use iframes.

Also, are all those DIV tags really necessary?

Verschwindende wrote:

CSS doesn't make pies

Tue, 2010-07-27 13:23

km1kze

Offline

newbie

Timezone: GMT+3

Joined: 2010-07-17

Posts: 4

Points: 5

I've tried to cut out some

I've tried to cut out some divs, but I made more worse

I have a lot of images (it's a portfolio site), and wanted to open every image in the same page. If you have another solution besides iframes, please enlighten me.

Wed, 2010-07-28 11:13

thepineapplehead

Offline

Guru

Joined: 2004-06-30

Posts: 9649

Points: 778

Something like this or this,

Something like this or this, perhaps?

Verschwindende wrote:

CSS doesn't make pies

problem with gap between 2 vertical divs

Post your HTML and CSS here,

sorry for the double post,

Hello, thansk for the reply;

IFrames are highly

I've tried to cut out some

Something like this or this,

New forum topics

User login

Navigation