...

View Full Version : aligning pictures, CSS



conphill
02-15-2011, 06:01 PM
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

<!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


* {
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;
}

quartzy
02-15-2011, 10:44 PM
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.

conphill
02-17-2011, 12:47 AM
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

quartzy
02-17-2011, 01:13 AM
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.

conphill
02-17-2011, 07:20 PM
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

* {
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;
}

quartzy
02-17-2011, 11:49 PM
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.

quartzy
02-18-2011, 02:31 AM
You will need to resize your images, so that they fit into the same dimensions as the div you are placing them in.

conphill
02-19-2011, 04:02 PM
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

quartzy
02-19-2011, 06:43 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum