Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Nov 2010
    Posts
    70
    Thanks
    6
    Thanked 0 Times in 0 Posts

    aligning pictures, CSS

    I am trying to get rid of the hover box I have right now and instead just leave the images in the same area and put text underneath them. I am just unsure of how to find the right dimensions to put the images in the same area as they were when I had the hoverbox there.

    Page:
    http://campustaps.com/NEW/homepageimageproblem.html

    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>CampusTaps.com</title>
    <link rel="stylesheet" href="homepageimage.css" type="text/css" />
    <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript"
    src="http://campustapscom.ipage.com/jquery.flow.1.2.auto.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $("#myController").jFlow({
    slides: "#slides",
    controller: ".jFlowControl", // must be class, use . sign
    slideWrapper : "#jFlowSlide", // must be id, use # sign
    selectedWrapper: "jFlowSelected", // just pure text, no sign
    auto: true, //auto change slide, default true
    width: "610px",
    height: "235px",
    duration: 400,
    prev: ".jFlowPrev", // must be class, use . sign
    next: ".jFlowNext" // must be class, use . sign
    });
    });
    </script>
    
    <!--CONTENT SLIDER-->
    
    </head>
    <body>
    <!--CONTAINER STARTS-->
    <div id="container"> 
    	<!--HEADER/NAVIGATION STARTS-->
     
    	<div id="top"> 
    		<!--WEBSITE TITLE STARTS-->
    		
    		<!--WEBSITE TITLE ENDS--> 
    		<!--NAVIGATION STARTS-->
    		<div id="nav">
    			<ul class="nav-links">
    				<li><a href="######" title="######">######</a></li>
    				<li><a href="#####" title="######">######</a></li>
    				<li><a href="######" title="######">######</a></li>
    				<li class="borderx2"><a href="######" title="######">######</a></li>
    			</ul>
    		</div>
    		
    		<!--NAVIGATION ENDS--> 
    	</div>
    	<!--HEADER/NAVIGATION ENDS-->
    	<div id="container2"> <img src="http://campustapscom.ipage.com/Images/campuscity.jpg" id="city"  alt="" />
    		<div id="main" style="opacity:0.9;filter:alpha(opacity=90)">
    			<div class="jflow-content-slider">
    				<div id="slides"> 
    					
    					<!-- Slide #1 Starts-->
    					<div class="slide-wrapper">
    						<div class="slide-thumbnail"> <img alt="" src="http://campustapscom.ipage.com/Images/EventsBlankBox.jpg"/> </div>
    						<div class="slide-details">
    							<h1><u> <a style="color: #fff">######</a></u> </h1>
    							<div class="description">
    								<h1><u> <a style="color: #fff">#####</a></u> </h1>
    							</div>
    						</div>
    						<div class="clear"></div>
    					</div>
    					<!-- Slide # 1 Ends --> 
    					<!-- Slide #2 Starts-->
    					<div class="slide-wrapper">
    						<div class="slide-thumbnail"> <img alt="" src="http://campustapscom.ipage.com/Images/EventsBlankBox.jpg"/> </div>
    						<div class="slide-details">
    							<h1><u> <a style="color: #030">######</a></u> </h1>
    							<div class="description">
    								<h1><u> <a style="color: #030">DATE</a></u> </h1>
    							</div>
    						</div>
    						<div class="clear"></div>
    					</div>
    					<!-- Slide # 2 Ends --> 
    					<!-- Slide #3 Starts-->
    					<div class="slide-wrapper">
    						<div class="slide-thumbnail"> <img alt="" src="http://campustapscom.ipage.com/Images/EventsBlankBox.jpg"/> </div>
    						<div class="slide-details">
    							<h1><u> <a style="color: #030">######</a></u> </h1>
    							<div class="description">
    								<h1><u> <a style="color: #030">########</a></u> </h1>
    							</div>
    						</div>
    						<div class="clear"></div>
    					</div>
    					<!-- Slide # 3 Ends --> 
    					.
    					.
    					.
    					. 
    					<!-- You can add as many slides as you want above this line --> 
    				</div>
    				<div id="myController"> <span class="jFlowPrev">Prev</span> <span class="jFlowControl">1</span> <span class="jFlowControl">2</span> <span class="jFlowControl">3</span> 
    					<!-- Increase these numbers as with the increase in your number of slides above --> 
    					<span class="jFlowNext">Next</span> </div>
    				<div class="clear"></div>
    			</div>
    			<div id="updates">
    				<ul>
    					<li>#######</li>
    					<li>######</li>
    					<li>jhjjfsff</li>
    				</ul>
    			</div>
    			<ul class="hoverbox">
    				<li> <a href="#"><img src="http://campustapscom.ipage.com/Images/TEST1.jpg" alt="description" /><img src="http://campustapscom.ipage.com/Images/TEST1.jpg" alt="description" class="preview" /></a> <br />
    					<p><b>#### <br />
    						######</b></p>
    				</li>
    				<li> <a href="#"><img src="http://campustapscom.ipage.com/Images/TEST1.jpg" alt="description" /><img src="http://campustapscom.ipage.com/Images/TEST1.jpg" alt="description" class="preview" /></a>
    					<p><b>######<br />
    						######</b></p>
    				</li>
    				<li> <a href="#"><img src="http://campustapscom.ipage.com/Images/TEST2.jpg" alt="description" /><img src="http://campustapscom.ipage.com/Images/TEST2.jpg" alt="description" class="preview" /></a>
    					<p><b>######</b></p>
    				</li>
    				<li> <a href="#"><img src="http://campustapscom.ipage.com/Images/TEST3.jpg" alt="description" /><img src="http://campustapscom.ipage.com/Images/TEST3.jpg" alt="description" class="preview" /></a>
    					<p><b>#####<br />
    						#####</b></p>
    				</li>
    			</ul>
    
    			<!--FOOTER STARTS-->
    			<div id="footer">
    				<p>Copyright &copy; 2010 <strong>CampusTaps Media Group</strong></p>
    			</div>
    			<!--FOOTER ENDS--> 
    		</div>
    	</div>
    </div>
    <!--CONTAINER ENDS-->
    </body>
    </html>
    CSS

    Code:
    * {
    	margin: 0px;
    	padding: 0px;
    	border: none;
    }
    body {
    	background-image: url(http://campustapscom.ipage.com/Images/Background.jpg);
    	background-repeat: repeat-x;
    	background-color: #ffffff;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #c8c8c8;
    }
    #container {
    	height:100%;
    }
    #top {
    	width: 850px;
    	height: 119px;
    	margin:auto;
    }
    #title {
    	float: left;
    	width: 278px;
    	height: 74px;
    	padding-top: 45px;
    }
    #title h1 {
    	display: block;
    	float: left;
    	width: 278px;
    	height: 74px;
    	text-indent: -9999px;
    }
    #title h1 a {
    	display: block;
    	width: 100%;
    	height: 100%;
    	background-repeat: no-repeat;
    	background-position: 0 0;
    }
    #navigation {
    	float: right;
    }
    .nav-links li {
    	display: block;
    	float: left;
    	list-style-type: none;
    }
    .nav-links li a {
    	float: left;
    	width: 120px;
    	height: 68px;
    	text-decoration: none;
    	text-transform: capitalize;
    	color: #666666;
    	font-size: 12px;
    	text-align: center;
    	padding-top: 51px;
    	border-left-width: 1px;
    	border-left-style: solid;
    	border-left-color: #cecece;
    }
    .nav-links li a:hover {
    	color: #ffffff;
    	background-position: center bottom;
    }
    li.borderx2 {
    	border-right-width: 1px;
    	border-right-style: solid;
    	border-right-color: #cecece;
    }
    .separator {
    	background-image: url(http://campustapscom.ipage.com/Images/separator.jpg);
    	background-repeat: no-repeat;
    	float: left;
    	height: 6px;
    	width: 960px;
    	margin-top: 20px;
    	margin-bottom: 20px;
    }
    .bx-pager a {
    	text-indent: -999999px;
    }
    h2 {
    	text-transform: uppercase;
    	color: #ffffff;
    	font-size: 16px;
    	margin-bottom: 15px;
    }
    .separator {
    	background-image: url(http://campustapscom.ipage.com/Images/divider.jpg);
    	background-repeat: no-repeat;
    	float: left;
    	height: 6px;
    	width: 960px;
    	margin-top: 20px;
    	margin-bottom: 20px;
    }
    #sidebar {
    	float: left;
    	height: 209px;
    	width: 219px;
    	background-image: url(http://campustapscom.ipage.com/Images/Updatesbox.gif);
    	background-repeat: no-repeat;
    	padding-top: 20px;
    	padding-right: 20px;
    	padding-bottom: 30px;
    	padding-left: 20px;
    }
    h3 {
    	text-transform: uppercase;
    	color: #ffffff;
    	text-align: center;
    	margin-bottom: 20px;
    	font-size: 12px;
    }
    .sidebar-list li {
    	list-style-type: none;
    	color: #2C5923;
    	margin-top: 10px;
    	padding-bottom: 10px;
    	background-image: url(http://campustapscom.ipage.com/Images/divider.png);
    	background-repeat: repeat-x;
    	background-position: bottom;
    }
    #content {
    	float: right;
    	width: 560px;
    	height: 300px;
    	color:#2C5923;
    	background-image:url(http://campustapscom.ipage.com/Images/picscontent2.gif);
    	background-repeat: no-repeat;
    	padding-top:15px;
    	padding-left:20px;
    }
    #content p {
    	margin-bottom: 15px;
    	text-align: center;
    }
    #footer {
    	text-align: center;
    	color:#FFF;
    	clear:both;
    	padding-top:30px;/*height: 20px;
    	clear: both;
    	margin-top: 10px;
    	padding-top: 25px;
    	
    	color: #ffffff;
    	background-image:url(http://campustapscom.ipage.com/Images/Body-bg.jpg);
    	position:relative;
    	z-index:1;*/
    }
    #jFlowSlide {
    	background:#7A7A7A;
    	font-family: Georgia;
    	margin:auto;
    }
    #myController {
    	font-family: Georgia;
    	padding:2px 0;
    	width:610px;
    	background:#333333;
    	margin:auto;
    }
    #myController span.jFlowSelected {
    	background:#43A0D5;
    	margin-right:0px;
    }
    .slide-wrapper {
    	padding: 5px;
    }
    .slide-thumbnail {
    	width:300px;
    	float:left;
    }
    .slide-thumbnail img {
    	max-width:300px;
    }
    .slide-details {
    	width:290px;
    	float:right;
    	margin-left:10px;
    }
    .slide-details h2 {
    	font-size:1.5em;
    	font-style: italic;
    	font-weight:normal;
    	line-height: 1;
    	margin:0;
    }
    .slide-details .description {
    	margin-top:10px;
    }
    .jFlowControl, .jFlowPrev, .jFlowNext {
    	color:#FFF;
    	cursor:pointer;
    	padding-left:5px;
    	padding-right:5px;
    	padding-top:2px;
    	padding-bottom:2px;
    }
    .jFlowControl:hover, .jFlowPrev:hover, .jFlowNext:hover {
    	background: #43A0D5;
    }
    .jflow-content-slider {
    	clear:left;
    	padding-top:40px;
    	width:700px;
    	margin:auto;
    }
    /* =Hoverbox Code
    ----------------------------------------------------------------------*/
    
    .hoverbox {
    	cursor: default;
    	list-style: none;
    	margin-left:279px;
    	margin-top:148px;
    }
    .hoverbox a {
    	cursor: default;
    }
    .hoverbox a .preview {
    	display: none;
    }
    .hoverbox a:hover .preview {
    	display: block;
    	position: absolute;
    	top: -33px;
    	left: -45px;
    	z-index: 1;
    }
    .hoverbox img {
    	background: #fff;
    	border-color: #aaa #ccc #ddd #bbb;
    	
    	border-width: 0px;
    	color: inherit;
    	
    	vertical-align: top;
    	width: 100px;
    	height: 100px;
    }
    .hoverbox li {
    	background: #eee;
    	border-color: #ddd #bbb #aaa #ccc;
    	border-style: solid;
    	border-width: 0px;
    	color: inherit;
    	display: inline;
    	float: left;
    	margin: 3px;
    	padding: 5px;
    	position: relative;
    
    }
    .hoverbox li p {
    	text-align:center;
    }
    .hoverbox .preview {
    	border-color: #000;
    	width: 200px;
    	height: 150px;
    }
    #container2 {
    	position:relative;
    }
    #city {
    	width:100%;
    	height:750px;
    	position:absolute;
    	top:0;
    	left:0;
    	z-index:0;
    }
    #main {
    	background:url(http://campustapscom.ipage.com/Images/mainpage1.png) no-repeat;
    	clear:both;
    	width:850px;
    	margin:auto;
    	height:729px;
    	position:relative;
    	z-index:1;
    }
    #updates {
    	width:275px;
    	padding:5px;
    	height:190px;
    	float:left;
    	margin-left:38px;
    	margin-top:150px;
    	overflow:auto;
    }
    #updates ul {
    	padding-left:20px;
    	list-style:disc;
    }

  • #2
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    You need the pixel width size of the hover box. Minus the pixel width of the images, to make sure they all fit, plus any padding you have.

  • #3
    New Coder
    Join Date
    Nov 2010
    Posts
    70
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by quartzy View Post
    You need the pixel width size of the hover box. Minus the pixel width of the images, to make sure they all fit, plus any padding you have.
    Is it possible for you to point out where in the CSS you are talking about?

    I am thinking of just creating a new div class for the pictures but want to take the position code that was from the hoverbox css

  • #4
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    It is quite simple whereever you want the images. I thought you said it was the hoverbox you wanted to replace so take the dimensions from that.

  • #5
    New Coder
    Join Date
    Nov 2010
    Posts
    70
    Thanks
    6
    Thanked 0 Times in 0 Posts
    I took the dimensions and made a new CSS for the div, but now the pictures are just stacked on top of each other and huge. I bolded the CSS I made for the images

    CSS
    Code:
    * {
    	margin: 0px;
    	padding: 0px;
    	border: none;
    }
    body {
    	background-image: url(http://campustapscom.ipage.com/Images/Background.jpg);
    	background-repeat: repeat-x;
    	background-color: #ffffff;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #c8c8c8;
    }
    #container {
    	height:100%;
    }
    #top {
    	width: 850px;
    	height: 119px;
    	margin:auto;
    }
    #title {
    	float: left;
    	width: 278px;
    	height: 74px;
    	padding-top: 45px;
    }
    #title h1 {
    	display: block;
    	float: left;
    	width: 278px;
    	height: 74px;
    	text-indent: -9999px;
    }
    #title h1 a {
    	display: block;
    	width: 100%;
    	height: 100%;
    	background-repeat: no-repeat;
    	background-position: 0 0;
    }
    #navigation {
    	float: right;
    }
    .nav-links li {
    	display: block;
    	float: left;
    	list-style-type: none;
    }
    .nav-links li a {
    	float: left;
    	width: 120px;
    	height: 68px;
    	text-decoration: none;
    	text-transform: capitalize;
    	color: #666666;
    	font-size: 12px;
    	text-align: center;
    	padding-top: 51px;
    	border-left-width: 1px;
    	border-left-style: solid;
    	border-left-color: #cecece;
    }
    .nav-links li a:hover {
    	color: #ffffff;
    	background-position: center bottom;
    }
    li.borderx2 {
    	border-right-width: 1px;
    	border-right-style: solid;
    	border-right-color: #cecece;
    }
    .separator {
    	background-image: url(http://campustapscom.ipage.com/Images/separator.jpg);
    	background-repeat: no-repeat;
    	float: left;
    	height: 6px;
    	width: 960px;
    	margin-top: 20px;
    	margin-bottom: 20px;
    }
    .bx-pager a {
    	text-indent: -999999px;
    }
    h2 {
    	text-transform: uppercase;
    	color: #ffffff;
    	font-size: 16px;
    	margin-bottom: 15px;
    }
    .separator {
    	background-image: url(http://campustapscom.ipage.com/Images/divider.jpg);
    	background-repeat: no-repeat;
    	float: left;
    	height: 6px;
    	width: 960px;
    	margin-top: 20px;
    	margin-bottom: 20px;
    }
    #sidebar {
    	float: left;
    	height: 209px;
    	width: 219px;
    	background-image: url(http://campustapscom.ipage.com/Images/Updatesbox.gif);
    	background-repeat: no-repeat;
    	padding-top: 20px;
    	padding-right: 20px;
    	padding-bottom: 30px;
    	padding-left: 20px;
    }
    h3 {
    	text-transform: uppercase;
    	color: #ffffff;
    	text-align: center;
    	margin-bottom: 20px;
    	font-size: 12px;
    }
    .sidebar-list li {
    	list-style-type: none;
    	color: #2C5923;
    	margin-top: 10px;
    	padding-bottom: 10px;
    	background-image: url(http://campustapscom.ipage.com/Images/divider.png);
    	background-repeat: repeat-x;
    	background-position: bottom;
    }
    #content {
    	float: right;
    	width: 560px;
    	height: 300px;
    	color:#2C5923;
    	background-image:url(http://campustapscom.ipage.com/Images/picscontent2.gif);
    	background-repeat: no-repeat;
    	padding-top:15px;
    	padding-left:20px;
    }
    #content p {
    	margin-bottom: 15px;
    	text-align: center;
    }
    #footer {
    	text-align: center;
    	color:#FFF;
    	clear:both;
    	padding-top:30px;/*height: 20px;
    	clear: both;
    	margin-top: 10px;
    	padding-top: 25px;
    	
    	color: #ffffff;
    	background-image:url(http://campustapscom.ipage.com/Images/Body-bg.jpg);
    	position:relative;
    	z-index:1;*/
    }
    #jFlowSlide {
    	background:#7A7A7A;
    	font-family: Georgia;
    	margin:auto;
    }
    #myController {
    	font-family: Georgia;
    	padding:2px 0;
    	width:610px;
    	background:#333333;
    	margin:auto;
    }
    #myController span.jFlowSelected {
    	background:#43A0D5;
    	margin-right:0px;
    }
    .slide-wrapper {
    	padding: 5px;
    }
    .slide-thumbnail {
    	width:300px;
    	float:left;
    }
    .slide-thumbnail img {
    	max-width:300px;
    }
    .slide-details {
    	width:290px;
    	float:right;
    	margin-left:10px;
    }
    .slide-details h2 {
    	font-size:1.5em;
    	font-style: italic;
    	font-weight:normal;
    	line-height: 1;
    	margin:0;
    }
    .slide-details .description {
    	margin-top:10px;
    }
    .jFlowControl, .jFlowPrev, .jFlowNext {
    	color:#FFF;
    	cursor:pointer;
    	padding-left:5px;
    	padding-right:5px;
    	padding-top:2px;
    	padding-bottom:2px;
    }
    .jFlowControl:hover, .jFlowPrev:hover, .jFlowNext:hover {
    	background: #43A0D5;
    }
    .jflow-content-slider {
    	clear:left;
    	padding-top:40px;
    	width:700px;
    	margin:auto;
    }
    
    
    #gallery {
    position:absolute;
    margin-left:279px;
    margin-top:148px;
    vertical-align: top;
    	width: 100px;
    	height: 100px;
    }
    
    #container2 {
    	position:relative;
    }
    #city {
    	width:100%;
    	height:750px;
    	position:absolute;
    	top:0;
    	left:0;
    	z-index:0;
    }
    #main {
    	background:url(http://campustapscom.ipage.com/Images/mainpage1.png) no-repeat;
    	clear:both;
    	width:850px;
    	margin:auto;
    	height:729px;
    	position:relative;
    	z-index:1;
    }
    #updates {
    	width:275px;
    	padding:5px;
    	height:190px;
    	float:left;
    	margin-left:38px;
    	margin-top:150px;
    	overflow:auto;
    }
    #updates ul {
    	padding-left:20px;
    	list-style:disc;
    }

  • #6
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    I dont know where you have placed your images, in the content? but the imges are too large for the div (whatever it is) by the sounds of it.

  • #7
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    You will need to resize your images, so that they fit into the same dimensions as the div you are placing them in.

  • #8
    New Coder
    Join Date
    Nov 2010
    Posts
    70
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by quartzy View Post
    You will need to resize your images, so that they fit into the same dimensions as the div you are placing them in.
    So I should change the css or the html? What should I do to change the image size

  • #9
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    The best way to resize images is with an image editor, get a free one here if you do not have one. http://photofiltre.en.softonic.com/

    You can resize in the html but the images would be large for page loading and it is better to resize images the correct way. As I do not use this method, I would not know how to advise you.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •