Jump to content

spacing between div containers

spudly1987

By spudly1987
in CSS Help

 Share
Go to solution Solved by OrionSuperman,

Recommended Posts

spudly1987 Member

spudly1987

Posted
Posted (edited)

I was able to resolve the other issue. but now I would like to make the .videodesc ( be centered under the box or video if possible

<!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" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Untitled Document</title>
</head>

<body>
<div id="Videos">
<div class="heading">Videos<div class="headingdesc">To Purchase One Of My Videos, All You Need To Do Is Click The Video
</div></div>
<div class="videocontainer">
<a href="http://www.myfreecams.com/mfc2/php/tip.php?&request=tip&broadcaster_id=15191885">
<img src="http://i1332.photobucket.com/albums/w616/IsisStar69/VID%20GIFS/SchoolGirlOnCouch_zps4ebbd9f5.gif" height="155px" width="255px" class="video" alt="" /><div class="videodesc">School Girl Couch Cum Scene<br />7 Minutes</div>
<div class="videobutton">250 Tokens</div>
</a>
</div>
<div class="videocontainer">
<a href="http://www.myfreecams.com/mfc2/php/tip.php?&request=tip&broadcaster_id=15191885">
<img src="http://i1332.photobucket.com/albums/w616/IsisStar69/VID%20GIFS/schoolgirl_zpsf2b82ae6.gif" height="155px" width="255px" class="video" alt="" /><div class="videodesc">School Girl Strip Tease (First Strip Tease Ever) - 5 Minutes</div>
<div class="videobutton">200 Tokens</div>
</a>
</div>
<div class="videocontainer">
<a href="http://www.myfreecams.com/mfc2/php/tip.php?&request=tip&broadcaster_id=15191885">
<img src="http://i1332.photobucket.com/albums/w616/IsisStar69/VID%20GIFS/NewOnBedWGlassToy_zpsb12fa367.gif" height="155px" width="255px" class="video" alt="" /><div class="videodesc">Breaking In The New Bed<br />7 Minutes</div>
<div class="videobutton">250 Tokens</div>
</a>
</div>
<div class="videocontainer">
<a href="http://www.myfreecams.com/mfc2/php/tip.php?&request=tip&broadcaster_id=15191885">
<img src="http://i1332.photobucket.com/albums/w616/IsisStar69/VID%20GIFS/KitchenCounterCum_zps0aa6c8bc.gif" height="155px" width="255px" class="video" alt="" /><div class="videodesc">Kitchen Counter Creamy Cum<br />7 Minutes</div>
<div class="videobutton">250 Tokens</div>
</a>
</div>
<div class="videocontainer">
<a href="http://www.myfreecams.com/mfc2/php/tip.php?&request=tip&broadcaster_id=15191885">
<img src="http://i1332.photobucket.com/albums/w616/IsisStar69/VID%20GIFS/PussyStretching_zps0a803686.gif" height="155px" width="255px" class="video" alt="" /><div class="videodesc">Pussy Stretching & Glass<br />6 Minutes</div>
<div class="videobutton">250 Tokens</div>
</a>
</div>
<div class="videocontainer">
<a href="http://www.myfreecams.com/mfc2/php/tip.php?&request=tip&broadcaster_id=15191885">
<img src="http://i1332.photobucket.com/albums/w616/IsisStar69/VID%20GIFS/ExtraBedroomScene_zps6611a2d7.gif" height="155px" width="255px" class="video" alt="" /><div class="videodesc">Black Corset(Extra Bedroom Cum Scene) - 8 Minutes</div>
<div class="videobutton">250 Tokens</div>
</a>
</div>
<div class="videocontainer">
<a href="http://www.myfreecams.com/mfc2/php/tip.php?&request=tip&broadcaster_id=15191885">
<img src="http://i1332.photobucket.com/albums/w616/IsisStar69/VID%20GIFS/BGLegsupSideways_zps6a90e1f4.gif" height="155px" width="255px" class="video" alt="" /><div class="videodesc">Boy/Girl Legs Up & Sideways<br />6 Minutes</div>
<div class="videobutton">300 Tokens</div>
</a>
</div>
<div class="videocontainer">
<a href="http://www.myfreecams.com/mfc2/php/tip.php?&request=tip&broadcaster_id=15191885">
<img src="http://i1332.photobucket.com/albums/w616/IsisStar69/VID%20GIFS/BJGaggingDeepThroat_zps13a280bb.gif" height="155px" width="255px" class="video" alt="" /><div class="videodesc">Bj/Gagging/Deepthroat<br />4 Minutes</div>
<div class="videobutton">250 Tokens</div>
</a>
</div>
<div class="videocontainer">
<a href="http://www.myfreecams.com/mfc2/php/tip.php?&request=tip&broadcaster_id=15191885">
<img src="http://i1332.photobucket.com/albums/w616/IsisStar69/VID%20GIFS/IsisStarAndTheGlassToy_zpscf51baf3.gif" height="155px" width="255px" class="video" alt="" /><div class="videodesc">The Glass Toy - 11 Minutes</div>
<div class="videobutton">300 Tokens</div>
</a>
</div>
<div class="videocontainer">
<a href="http://www.myfreecams.com/mfc2/php/tip.php?&request=tip&broadcaster_id=15191885">
<img src="http://i1332.photobucket.com/albums/w616/IsisStar69/VID%20GIFS/GlassToyMultiplePositions_zps03c381f3.gif" height="155px" width="255px" class="video" alt="" /><div class="videodesc">Glass Toy, Multiple Positions<br />8 Minutes</div>
<div class="videobutton">250 Tokens</div>
</a>
</div>
</body>
</html>


.video:hover{
	border:5px solid #0FF;
}
.video{
	border:5px solid rgb(255,0,133);
	border-radius:5px;
	float:left;
	box-shadow: -5px 5px 15px -3px #000000;
}
img{
	border:0;
}
.videodesc{
	position:absolute;
	margin-top: 170px;
	font-size:16px;
	font-family: 'architects daughter',cursive;
}
div{
	display:block;
}
.videobutton{
	position:absolute;
	margin-top: 220px;
	background-color: rgb(119,220,245);
	border-radius:5px;
	padding:5px;
	border: 2px solid;
	font-family:verdana;
	margin-left:130px;
	box-shadow: -3px 3px 7px -2px #000000;
}
.videocontainer{
	margin:10px;
	height:240px;
	position:relative;
	width:280px;
	float:left;
}
#videos{
	margin-top: 440px;
	width: 900px;
}
div{
	display:block;
}
.heading{
	color:#000;
	font-weight:normal;
	font-size:30px;
	font-family:permanent marker;
	border-bottom:2px solid rgb(219,28,112);
}
.headingdesc{
	font-size:14px;
	margin:10px;
}
.heading{
	margin-bottom: 15px;
	padding: 5px;
}
Edited by spudly1987
Link to comment
https://forums.phpfreaks.com/topic/287258-spacing-between-div-containers/
Share on other sites
  • Solution
OrionSuperman Newbie

OrionSuperman

Posted
  • Solution
Posted

I'm not quite willing to test the code based on the descriptions... but I'll give you my ideas based on what I see in the code.

 

You can try adding margin-left:auto; margin-right:auto; to the .videodesc in CSS, this should pad the words to the center of the div it is within. You may have to remove the absolute positioning to have this work properly. Changing the positioning to relative will also allow you to adjust the position with top:-15px; etc.

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.