|
CSS - Difficulty Placing Div
I know this is probably the most asked question here, but I've been playing with it for a while and ...
Anyway, this is my page This is my CSS Code: body {font-family: Arial, Helvetica, sans-serif}
td {font-family: Arial, Helvetica, sans-serif}
th {font-family: Arial, Helvetica, sans-serif}
div.container {
width:750px;
margin:auto;
}
div.logo {
float:left;
text-align:center;
width:138px;
height:138px;
}
div.header {
height:65px;
border:1px solid blue;
line-height:50%
}
div.picbar {
height:65px;
border:1px solid red;
line-height:50%;
}
/* The following code creates the navigation items */
#navbar {
clear:left;
float:left;
width:auto;
padding:0;
vertical-align:middle;
}
#navbar li{
margin:2px; /*dictates the space between navbar items */
padding-right:0.5em;
width:120px;
float:left;
text-align:center;
}
#navcol {
clear:left;
float:left;
width: 125px;
padding: 0;
margin: 10px 0 0 0;
font-family: 'Trebuchet MS', 'Lucida Grande',
Verdana, Lucida, Geneva, Helvetica,
Arial, sans-serif;
color: #99CCFF;
}
#navcol ul, #navbar ul{
list-style:none;
margin:0; /* removes indent in IE and Opera */
padding:0; /* removes indent in Mozilla and Netscape 7 */
border:none;
list-style-type:none; /*turns off display of bullet */
}
#navcol li {
border-bottom:1px solid #003366;
margin:0; /*dictates the space between navbar items */
}
#navcol li a, #navbar li a {
display: block; /* enables the entire link box to be clickable */
padding: 5px 0 5px 5px;
border-left: 10px solid #003366;
border-right: 0px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%
}
#navcol li a:hover, #navbar li a:hover {
border-left: 10px solid #99CCFF;
border-right: 0px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}
div.intro{
margin-left:145px;
position:relative;
padding-top:1px;
font-family:Verdana,Lucida;
font-size:12px;
line-height:150%;
}
div.google{
float:right;
margin-top:10px;
width:305px;
height:255px;
padding:0 0 5px 10px
}
div.footer {
margin-top:50px;
width:750px;
word-spacing:100px;
text-align:center;
float:center;
height:20px;
background-color:#1c64d1
}
div.copyright {
width:750px;
text-align:center;
float:center;
height:20px;
}
a.ft:link { color: white; text-decoration: none }
a.ft:active { color: red; text-decoration: none }
a.ft:visited { color: white; text-decoration: none }
a.ft:hover { color: yellow; text-decoration: underline }
h1.logo{padding:20px;margin:10px}
h2.header{color:blue;font-size:1.2em;padding:20px;margin:10px}
h3.title{font-family:arial;color:green;font:courier}
h4.ftlinks{padding:10px;font-size:12px;color:"dark blue"}
b.subtitle{font-variant:small-caps;font-size:12px;font-weight:bold;after-content:" - "}
What I want to do is have the navbar div be positioned in the center of the red box that I have defined as the picbar div...it should be under the "Funkyfoof - Smarter Spending..." Thanks for your time Similar TutorialsI have the strangest thing going on when I view my site in IE 6. I'm using Drupal and the body tags have classes assigned to it depending on what page you are viewing. Therefore, I can have different content IDs by descending from the body tag. So, I have the following declared in my stylesheet: Code:
body.two-sidebars div#content {
margin: 0em 160px 20px 160px;
padding: 0 10px;
line-height: 1.6em;
text-align: left;
}
body.sidebar-left div#content {
margin: 0em 10px 20px 160px;
padding: 0 10px;
line-height: 1.6em;
text-align: left;
}
In FF and even IE7 my content divs view as they should depending on the class in the body. However, in IE6, my margin declaration is ignored when the page is loaded, but on a refresh, the page usually will display correctly. Are my styles technically declared correctly or is there anything I can do to make the "more correct" and therefore make IE6 happy? Here's my website. For those of you that have IE6 (or even IE7 to double check me), let me know if the margins in the content areas are working or if the text runs over the side bars. http://whirligig.dreamhosters.com/ Hello all, I am having difficulty with creating a menu: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
#menu {
width: 200px;
display: block;
float: left;
} /* end #menu */
#menu ul { list-style-type: none; }
#menu ul li { background-color: #0000ff; margin-bottom: 1em; }
#menu ul li a {
display: inline;
width: 100px;
text-decoration: none;
color: #000000;
font-size: 0.8em;
border-top: 2px solid #000000;
border-bottom: 2px solid #000000;
background-color: #ffffff;
} /* end #menu ul li a */
#menu ul li:before { content: url("images/menu_left2.png"); }
#menu ul li:after { content: url("images/menu_right2.png"); }
</style>
</head>
<body>
<div id="container">
<div id="menu">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="about_us.php">About Us</a></li>
<li><a href="get_an_estimate.php">Get An Estimate</a></li>
<li><a href="services.php">Services</a></li>
<li><a href="portfolio.php">Portfolio</a></li>
<li><a href="job_opportunities.php">Job Opportunities</a></li>
<li><a href="contact_us.php">Contact Us</a></li>
</ul>
</div>
</div>
</body>
</html>
For starters, I would like the link to be 100px wide no matter what. I can achieve this with display: block in the anchor tag definition, but then that pushes each image onto a new line. The way I have it now is closest, but the images do not line up with the anchor tag. The anchor tag seems to be pushed down by about 4 or 5 pixels. I've tried various combinations of margin adjustions but nothing seems to fix it. Also, I tried just adding extra pixels to the top of the image but that pushes the whole block down, not just the images. Any thoughts? To design my new site properly I am learning to use CSS for layout. To practice my CSS styling I want my first sample site to have, from top to bottom: 1) a simple centered H1 heading; 2) a CSS-styled drop-down menu bar centered under the heading; and 3) two columns of text (paragraphs). Finally, the footer includes a page hit counter followed by the two W3C gif files (XHTML 1.0 and CSS) in the lower-left and right corners. All together, these pieces should make up a very simple practice page for me (http://stallinswebdesign.com/vs/index.php). However, I cannot find an online tutorial to explain in great detail how to use the position property to put these things where I need them to be. I am getting very frustrated that I can't figure out through trial and error how the absolute and relative values work together to position my stuff the best way on the page. I don't what to write hack CSS. I don't want to "hard code" the whole page with absolute positioning, because it won't scale when font sizes change from visitor to visitor, right? I want to write lean, best-practice CSS. I've concluded that, after reading some online tutorials and perusing the CSS books I've recently bought, I don't have the first clue how absolute and relative positioning work. For example, I can't get that second column of paragraphs to line up alongside the left column unless I apply what looks to me like a CSS hack. Like many examples I've seen online, I'm using the <div> tag to wrap multiple pieces of data together so that I can apply styling (especially positioning) to them as a whole. In particular, the left column paragraphs are wrapped in <div id="contentLeft">, and the right column paragraphs are wrapped in <div id="contentRight">, and both together are surrounded by parental <div id="content"> tags. Still, it takes a lot of pain for me to style those three id's in the CSS file so that the two columns appear where I want them. And don't even ask me about what should be a simple footer placement! I can't get the hit counter paragraph and those two W3C images to get to the bottom of the page without absolute positioning. But when I do that, they don't scale up or down automatically as the amount of text in those two columns increases or decreases. Can you please glance at my .css and .htm files below and tell me where I'm going wrong? More importantly (teaching me to fish and not just feeding me fish :-) ) can you point me to an online or printed resource that goes into great detail explaining the uses of the position property? This is so not like tables :-D Thank you for your time and advice. Curtis my content CSS file (no menu stuff): Code:
body {
font: 100%/1.4 arial, helvetica, serif; background-color:#fff;
text-align:left; padding:0px; margin:0em; width:64em;}
#homeTitle {
position:absolute; font-size:2.0em;
background-color:#f5f8ec; color:green; letter-spacing:0.3em;
margin: 0em 0em .1em 1em;}
p {
background-color:#fff5e8;}
#bannerRight {
position:absolute; z-index:2; top:7em; left:29em;
background-color:#fff;}
#content {
position:absolute; width:45em; border:dotted 1px red;
margin-left:9em; margin-top:19em;}
#contentLeft {
position:relative; margin-left:0.5em; margin-right:24em;
border:dotted 1px blue;}
#contentRight {
position:relative; margin-top:-78.5em; margin-left:24em;
margin-right:0.5em; border:dotted 1px fuchsia;}
#counter {
position:relative; top:1.5em; border:dotted 1px gray;}
#W3C_boxes {
position:relative; margin-top:6.5em;}
#W3C_css {
display:inline; padding-left:48em;}
img {
border:0px;}
my sample web page: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>
Valley Spokesmen Bicycle Touring Club
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="The Valley Spokesmen Bicycle Touring Club, for bicycle enthusiasts of all ages, is based in Dublin California and hosts dozens of club rides each month, both local and afar, ranging from 15-mile cruises to 100-mile epics!" />
<meta name="keywords" content="Valley Spokesmen, Cinderella Classic, valley spokesman, cinderella ride, cinderella century, valleyspokesmen bike club, valleyspokesmen, cinderella bike ride, cinderella classic bike ride, cinderella ride california, cinderella bicycle ride, valley spokesmen bike club, valleyspokesmen.org, cinderella bike, bike club san francisco" />
<script type="text/javascript" src="js/formEmailValid.js"></script>
<script type="text/javascript" src="js/newWindow.js"></script>
<script type="text/javascript" src="js/newWindow_2.js"></script>
<script type="text/javascript" src="js/linkExternal.js"></script>
<script type="text/javascript" src="js/navDrop.js"></script>
<link rel="shortcut icon" href="ico/favicon.ico" />
<link rel="icon" href="images/animated_favicon1.gif" type="image/gif" />
<link rel="stylesheet" type="text/css" href="css/siteWide.css" />
<link rel="stylesheet" type="text/css" href="css/menus.css" />
</head>
<body>
<h1 id="homeTitle">Valley Spokesmen Bicycle Touring Club</h1>
<div id="container">
<ul id="nav">
<li><a href="#">Home</a> <!-- first dropdown -->
<ul>
<li><a href="#">Home Page</a></li>
<li><a href="#">About Our Club</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</li>
<li><a href="#">Events</a> <!-- second dropdown -->
<ul>
<li><a href="#" class="topDrop">Cinderella Classic</a>
<ul>
<li><a href="#">Training Schedule</a></li>
</ul>
</li>
<li><a href="#" class="topDrop">TOSRD</a>
<ul>
<li><a href="#">Registration Form</a></li>
</ul>
</li>
<li><a href="#">Clinics</a></li>
</ul>
</li>
<li><a href="#">Favorites</a> <!-- third dropdown -->
<ul>
<li><a href="#">Ride Calendar</a></li>
<li><a href="gallery.php" class="topDrop">Photo Gallery</a>
<ul>
<li><a href="gallery_2008.php">2008 Photos</a></li>
<li><a href="gallery_2007.php">2007 Photos</a></li>
<li><a href="gallery_2006.php">2006 Photos</a></li>
<li><a href="gallery_2005andEarlier.php">2005 and Earlier</a></li>
</ul>
</li>
<li><a href="#">Local Bike Shops</a></li>
<li><a href="#">Favorite Links</a></li>
<li><a href="#">West Coast Rides</a></li>
<li><a href="#">BikeJournal.com</a></li>
</ul>
</li>
<li><a href="#">Downloads</a> <!-- third dropdown -->
<ul>
<li><a href="#">Membership App</a></li>
<li><a href="#">For New Members</a></li>
<li><a href="#">Club Newsletters</a></li>
<li><a href="#">Rules of the Road</a></li>
<li><a href="#">New Ride Leaders</a></li>
<li><a href="#">Club Ride Waiver</a></li>
</ul>
</li>
<li><a href="#">Grab Bag</a> <!-- third dropdown -->
<ul>
<li><a href="#">Bike Routes</a></li>
<li><a href="#">Route Ratings</a></li>
<li><a href="#">Club Clothing</a></li>
<li><a href="#">VS E-Mail List</a></li>
<li><a href="#">VS Race Team</a></li>
</ul>
</li>
</ul>
</div>
<p id="bannerRight">
<?php
$bannerPhoto_array = file('random/bannerArrayPhotos.txt'); // Get photos into an array from the text file using file()
$quote3 = $bannerPhoto_array[rand(0, count($bannerPhoto_array) - 1)]; // Randomly pick one element of the array
$quote3 = trim($quote3);
echo "$quote3";
?>
</p>
<div id="content">
<div id="contentLeft"><!-- begin left-side content -->
<p>
<script type="text/javascript">
<!-- hide from archaic browsers...
// greeting for home page
function dayPart( ) {
var oneDate = new Date( );
var theHour = oneDate.getHours( );
if (theHour < 12) {
return "morning";
} else if (theHour < 17) {
return "afternoon";
} else {
return "evening";
}
}
document.write("<p class=\"homeWelcome\">Good " + dayPart( ) + ", and welcome!</p>");
// end hide -->
</script>
</p>
<noscript>
<p>
Welcome!
</p>
</noscript>
<p class="">
From our President:
</p>
<p class="">
Happy New Year! This is the season to renew, reflect and recover. I trust that your new year brings a renewed interest in biking,
fitness and adventure. I can assure you that the new leadership team of the Valley Spokesmen Bicycle Touring Club
has all of these interests in mind as we enter our new jobs working for you.
</p>
<p class="">
But first I would like to recognize Susan Gibbs and her team for their contributions over the past year.
They made a significant contribution to the club and bicycling in our community during the past year.
I want to say thank you on behalf of the entire club for their service.
</p>
<p class="">
Our new leadership team includes Vice-President Mark Dedon; Treasurer Bill Well; Corresponding Secretary Bonnie Powers;
Recording Secretary Kim Autrey; Race Team Representative Bob Fusco; Newsletter Editor Marcia Seeger; TOSRD Chairperson
Francie Cushman; Newsletter Publisher Mary Murphy; and Ride Chairpersons Curtis Stallins and Peter Rathmann. Each of us
appreciates the confidence that you entrusted in us to serve you during 2008.
</p>
<p class="">
We plan on beginning our year by reflecting on what the state of governance of the club is to assure we have a solid
path forward. That includes updating the club’s by-laws, seeking professional help to deal with our fiduciary
responsibility of managing our club’s money, and aligning our responsibilities on the leadership team. Of course,
we need everyone to support Bob, Bonnie and Jim in organizing the events that make up the Cinderella Classic during the
weekend of April 4-6, 2008. Please save the dates. But most of all, we need you to ride with us.
</p>
<p class="">
I look forward to meeting every one on a ride during the coming year and greeting you at the Mid-winter party on
February 9, 2008. The location is the same as last year, however the hotel has a new name: Pleasanton Plaza by Marriott’s
(formerly Crowne Plaza). Make your reservation today!
</p>
<p class="">
Have a great ride today and every day.
<br />
<span class="bold">- Jim Kohnen</span>
</p>
</div> <!-- end left side content -->
<div id="contentRight"> <!-- begin right-side content -->
<p class="">
Want to earn some free V.S. gear? Look at all the cool
<a href="javascript:newWindow_2('rideLeaderAwards.htm')">
Valley Spokesmen clothing</a> you can earn just by leading some rides each year!
</p>
<p class="size12px">
<?php
echo "<span class=\"cheers\">Cheers from the Valley Spokesmen!</span><br />";
$cheers_array = file('random/cheersQuotes.txt'); // Get quotes into an array from the text file using file()
$quote2 = $cheers_array[rand(0, count($cheers_array) - 1)]; // Randomly pick one element of the array
$quote2 = trim($quote2);
echo "$quote2"; // Echo results.
?>
</p>
<p class="">
<span class="boldOrange">New Members</span> - get up to speed quickly! Download and browse through our
<a href="pdfFiles/0712_New_Member_Booklet.pdf" rel="external">New Member Handbook</a>.
</p>
<p class="">
<span class="boldOrange">
Not sure what "Car up!" means?
</span>
<br />
Read over our new
<a href="pdfFiles/0712_Bike_Rules_Of_The_Road.pdf" rel="external">Rules of the Road</a>.
</p>
<p class="">
<span class="boldOrange">How easy is it to lead a ride?</span>
Find out how much fun it can be when you look through our new
<a href="pdfFiles/0712_Becoming_A_Ride_Leader.pdf" rel="external">Ride Leader Guide</a>!
<br />View our <a href="javascript:newWindow_2('rideLeaderAwards.htm')" style="font-size:16px">Ride
Leader Awards</a> program!
</p>
<p class="">
<span class="boldOrange">
YES! - it’s Winter!
</span>
<br />
Which are you most looking forward to?
<br /> - <span class="boldBold">Scraping ice from your windshield
<br /> - Valentine’s card shopping
<br /> - Cycling through a crisp winter day</span>
<br />We knew it! You ought’a join the Valley Spokesmen and savor some beautiful winter riding,
so check our <a href="vsCalendar/month.php" rel="external">ride calendar</a> for dates that look the most
fun to you.
</p>
<p class="">
<span class="boldOrange">
Rides For The Rest Of Us</span>
<br />
If you want to start riding casually and make new friends who share your
interests, then you should join us on our <!-- <a href="rides.html#newbie">newbie rides</a> -->
shorter rides. We offer at least two rides a month for people just like you! Check the
<a href="vsCalendar/month.php" rel="external">ride calendar</a> and see how many rides suit you!
<br />
</p>
<p class="">
<span class="boldOrange">
Join the Club!
</span>
<br />
For a few dollars a year you get all this:<br />
- Monthly newsletter packed with info<br />
- A map to local pubs and coffee shops<br />
- Tons of advice on bicycle repair<br />
- Discounts in local bike shops<br />
- All the new friends you can handle!<br />
Mail <a href="pdfFiles/membershipApp.pdf" rel="external">your application form</a> today!
</p>
<p class="">
<span class="boldOrange">
Ride in style
</span>
<br />
View <a href="clothing.php">clothing information</a> online. Send an e-mail to Jim Duncan if you
are interested in club jerseys, shorts, socks, vests, jackets, etc. His address is hey-you at comcast dot net.
</p>
</div> <!-- end right-side content -->
</div><!-- end two columns of content; begin counter and footer -->
<div id="counter">
<p>
Visitors to our site since November 14, 2006: <img src='http://counter.dreamhost.com/cgi-bin/Count.cgi?df=cstallins-VScounter.dat&pad=F&ft=0&dd=odb&istrip=F' alt="Our page hit counter is over a million for the year!" />
</p>
</div> <!-- end counter; begin footer -->
<div id="W3C_boxes">
<a href="http://validator.w3.org/check?uri=referer">
<img src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
<a href="http://jigsaw.w3.org/css-validator/">
<img id="W3C_css" style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-css-blue" alt="Valid CSS!" /></a>
</div>
</body>
</html>
i want to place images: top right, middle right, bottom left, these images should float above any other images or content that is on the page, the must also stay in there positions when the browser is resized. I'm still new to css so can any body help me pls How does one go about placing an image in a paragraph in CSS? I cannot seem to complete this. doug I have a scrolling DIV and a button which when clicked gives the user the option to insert another such DIV below the existing one. How can I position a new DIV directly below another regardless of the length or height of the first DIV. How would margins play a role? Hello all.. trying to do something that should be pretty simple (I'm not the best CSS person). Instead of using a table am trying to use just CSS. I want to place a form button styled as a link and some text into a colored box but my css is not working. html is... <span class="yellowbox"> <form name="view constituent" method="post" action="constituents_viewm.php"> <input type=submit name=submit value=$lname, $fname" class="link_submit"> </form> <br /><br />text </span> and css is... .yellowbox { background-color:#fdffe3; margin:10px; padding:10px; border: 1px #000; font-size:13px; width:420px; height:100px; } .link_submit { color:#116500; font-size:17px; font-family:Calibri, Arial, Helvetica, sans-serif; background:none; border:none; display:block; text-decoration:underline; cursorointer; float:left; } any help will be greatly appreciated. I have a larger 22" in screen when I designthe layout of my site. When I viewed it on a small 15" screen the back ground image is making the page scroll horizontially. Here are some sites that fit well on a small screen. What can I do to fix this? http://www.beakable.com/ http://www.gazelletouch.com/ http://www.gummisig.com/ My web site: http://markallen.us Hey everyone I'm a beginner at CSS. I'm trying to place divisions exactly where I want, but when I attempt to overlap them it doesn't render the way I intend it to (inconsistent in different browsers as well.) Does anyone have any tips? 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=iso-8859-1" />
<?php
//variables
//title
$title_ = "Title";
?>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#myhr {
width: 90%;
}
body {
padding: 15px 0px 15px 0px;
margin-left:auto;
margin-right:auto;
margin-top:auto;
margin-bottom:auto;
width: 904px;
background-color:#CCCC66;
}
#container {
padding:
float: left;
width: 898px;
height: 900px;
background-color:#999999;
border: solid rgb(250,0,255);
border-width: 2px 2px 2px 2px
}
#link1{
margin: 0px 0px 0px 0px;
float: left;
width: 222px;
background-color:#CCCC66;
height: 25px;
border: solid rgb(250,0,255);
border-width: 2px 1px 2px 1px;
z-index:1;
}
#link2{
float: left;
height: 25px;
margin: 0px 0px 0px 0px;
width: 223px;
background-color:#CCCC66;
border: solid rgb(250,0,250);
border-width: 2px 1px 2px 1px;
z-index:1;
}
#link3{
float: left;
margin: 0px 0px 0px 0px;
height: 25px;
width: 223px;
background-color:#CCCC66;
border: solid rgb(250,0,250);
border-width: 2px 1px 2px 1px;
}
#link4{
float: left;
height: 25px;
width: 222px;
margin: 0px 0px 0px 0px;
background-color:#CCCC66;
border: solid rgb(250,0,250);
border-width: 2px 1px 2px 1px;
z-index:2;
}
#innerbox{
width:136px;
height:177px;
margin: 0px 0px 0px 68px;
z-index:0;
background: #CCCC66;
border: solid rgb(250,0,250);
border-width: 2px 2px 2px 2px;
}
#innerbox2{
width:136px;
height:177px;
margin: -182px 0px 0px 275px;
z-index:0;
background: #CCCC66;
border: solid rgb(250,0,250);
border-width: 2px 2px 2px 2px;
}
#innerbox3{
width:136px;
height:177px;
margin: -182px 0px 0px 482px;
z-index:0;
background: #CCCC66;
border: solid rgb(250,0,250);
border-width: 2px 2px 2px 2px;
}
#innerbox4{
width:136px;
height:177px;
margin: -260px 0px 0px 689px;
z-index:1;
background: #CCCC66;
border: solid rgb(250,0,250);
border-width: 2px 2px 2px 2px;
}
</style>
<title><? echo $title_; ?></title>
</head>
<body>
<div id="container"><br />
<h1 id="myh1" class="h1color_" align="center"><? echo $title_; ?></h1>
<div align="center">
<hr align="center" id="myhr" />
</div>
<br />
<div id="link1" style="background-color:#CCCC66"><p>link1</p></div>
<div id="link2">link2</div>
<div id="link3">link3</div>
<div id="link4">link4</div>
<!--<button onclick="positioning_width_other()">pos other</button>-->
<br />
<br />
<br />
<br />
<div id="innerbox"><p align="center">Box</p></div>
<div id="innerbox2"><p align="center">Box2</p></div>
<div id="innerbox3"><p align="center">Box3</p></div>
<div id="innerbox4"><p align="center">Box4</p></div>
</div>
</body>
</html>
Sorry folks, css novice here. But i'm trying to get this div into the center of my browser. It works vertically, but each time I try to sort it out horizontally it goes all over the place - any thoughts on this? Code: <html>
<head>
<title></title>
<style>
.greenBorder {border: 1px solid green;}
.redBorder {border: 1px solid red;}
</style>
</head>
<body>
<div class="redBorder " style=" #position: absolute; _top: 50%;display: table-cell; vertical-align: middle; text-align:center;">
<div class="greenBorder" style=" #position: relative; #top: -50%; " >
stuff
</div>
</div>
</body>
</html>
what am I doing wrong? recommend any good css books? Well, it's been an extremely long night. I've been trying to get this bottom bar element working for at least a couple nights now, and I feel so very close. I've been trying to use footerStickAlt, which would allow me to put this baby down on the bottom of my page and would not overlap or screw up the scrolling when installed. However, as you might be able to tell from my website, http://www.brianmooremedia.com, it's not working too well. Here is my CSS: http://www.brianmooremedia.com/style.css If anybody can help me make this red bar stop and stay down once the window size has gotten smaller than it, please let me know! Thanks a ton, Brian Is there a way to define a text style where a dash and a space is automatically inserted after the text? If I want this: Subtitle and then content To look like this: Subtitle - and then content How can I do that? Thanks I 'think' style sheets are the answer to my problem. Now I cannot webdesign and so everything is a mishmash but I saw this accordion image viewer made in AJAX for free and wanted to put it on my site, but I need to position it in an exact position on my webpage. How do I do this please? Accordion: http://www [dot] ajaxcrawler [dot] com/2008/01/image-menu-using-moo-tools [dot] html My webpage: http [colon] // lovelago.googlepages [dot] com/test7a.html CSS: http [colon] // lovelago.googlepages [dot] com/main.css Also, I only need a really trim version of this CSS, as it came with the webpage that had the accordion and has all of its 'own style' that I do not need. Thanks to anybody! note to admin: I'm not a spammer, thanks. OK here is my setup. I have a 3rd party search on my page, the script produces results and the only edit I have access to is the css...(and the actual script ) not the <div> layout of the results page. The script generates a block and then an alt block for the search results with an image floating beside the text (if there is one available) My first problem was the amount of output text varies but does have a maximum.....I have fixed this by specifying the height of the result block to contain it. My real problem is the sizes of my thumbnail images vary and this allows my text to flow all around it if the image height doesn't fill the area as you can see in my screenshot. edit: apparently I can't post images but here is a link to the image http://img.photobucket.com/albums/v288/schmooot/various%20posted/sample.gif here is my css pertaining to the section Code:
.result_image { float: left; display: block; }
.result_image img { margin-top: 5px; border: 1px solid #EF3013; max-height: 75px; max-width: 75px; }
.result_block { margin-top: 0px; margin-bottom: 0px; background: #BBBBBB; border: 1px solid #000000; height: 100px;}
.result_altblock { margin-top: 0px; margin-bottom: 0px; background: #DDDDDD; border: 1px solid #000000; height: 100px;}
I would like the text to stay 80px from the left of the box always.....regardless of what size the image is. I attempted to force it by specifying the image width to be 75px and it did work but then it force resized my images to fit and some of them need to retain the aspect. I made them retain their aspect ratio by using the max-width and max-height attributes but now some images don't have the height to fill the space So really how do I make the 'block' containing the image to always be the same height of the text beside it (or just to always be 100px)...or force the text 'block' to stay with an 80px left margin. The image is within the text block as you can see in the output source below so I can't just add a margin to the block...also I cannot edit the actual <div> output as I do not have access to the place it is defined... but here it is for reference Code: <div class="result_altblock"><div class="result_image"><a href="item link"><img src="image" alt="" class="result_image" /></a></div><div class="result_title"><b>4.</b> <a href="link">Title</a></div> <div class="description">Description</div> <div class="infoline"></div> </div> <div class="result_block"><div class="result_image"><a href="item link"><img src="image" alt="" class="result_image" /></a></div><div class="result_title"><b>4.</b> <a href="link">Title</a></div> <div class="description">Description</div> <div class="infoline"></div> </div> I am having trouble with placing an image on my page and having that image repeat itself all the way down the page. Code: <div id=left> ........ content ...</div> <div id="image">this is where i want the image</div> <div id="content">content here</div> Where the id=image tag is placed i want the image to appear and roll all the way down the screen. I have the following css code Code:
#left {
position: absolute;
left: 0px;
width: 215px;
background-color: #efefef;
border: 1px dotted #ccc;
}
#image1 {
background-image: url("http://mydomain.com/image.jpg")
background-repeat: repeat-y;
width: 15px;
margin-left: 215px;
}
#center {
margin-left: 260px;
margin-right: 0px;
overflow: hidden;
}
The image does not show on the page at all, i need to know if i am doing this correctly or if there is another way without hardcoding the image into the page Cheers Hello everyone, I wanted to ask, how to place a text over a rollover image. Most ppl recommend to set the image as background in table or div tag, but that would prevent to make the image a rollover. To put it simply, I want to create an effect, I have seen e.g. at ehow.com When you place your cursor on a button in the menu, the text gets underlined. When you place your cursor on a button in the submenu ("Browse How Tos"), the text gets ubderlined AND the image changes. Is this somehow a combination of rollover text and image? My question basically is: HOW DO YOU CREATE SUCH AN EFFECT? Thank you for your replies, Tomas Hi, Is there a relatively simple way to place an image over the main background of a site, on the right of the main design? For example, see how the Keller Williams logo is on the right, over the background he http://www.groundedgroup.com/client...Interface3.html Ideally, I want to make it happen he http://www.groundedgroup.com/clients/NWR/ It would be great if the image was always just a little bit to the right of the main design, like shown above. Any ideas? Thanks. I wish to place a small image with a caption by its side in the middle of a div. What would be the better approach, (i)to put the two in a div and use absolute positioning or (ii)to use margins to position the two. Either way seems to work but I am looking for an approach that would be considered correct by a professional web developer. All help would be greatly appreciated. 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>
<style type="text/css">
body
{ text-align: center;
min-width: 1044px;
margin: 0px;
padding: 0px;
font-family: arial;
}
#wrapper
{ position: relative;
text-align: left;
width: 1044px;
height: 100%;
margin: 0px auto;
}
#top-header-block
{ width: 1010px;
height: 170px;
background-color: cyan;
}
#top-header-block img
{ height: auto;
width: auto;
}
#logo
{ float: left;
}
/*------------------------------------------*/
#inner-div
{ height: auto;
width: auto;
position: absolute;
left: 567px;
top: 41px;
}
#inner-div img
{ float: left;
}
#inner-div p
{ float: left;
margin-top: 3px;
margin-left: 5px;
color: #0d2474;
font-family: arial,sans-serif;
font-size: 11px;
font-weight: bold;
}
/*------------Alternative to above-------------*/
#img-B
{ float: left;
margin-left: 315px;
margin-top: 40px;
}
#top-header-block p
{ float: left;
margin-top: 43px;
margin-left: 5px;
color: #0d2474;
font-family: arial,sans-serif;
font-size: 11px;
font-weight: bold;
}
/*------------------------------------------*/
</style>
</head>
<body>
<div id="wrapper">
<div id="top-header-block">
<a href="#">
<img id="logo" src=""
alt="" width="248" height="65"/></a>
<div id="inner-div">
<a href="#">
<img src=""
alt="" width="66" height="20" /></a>
<p>: 0 items</p>
</div>
<!-------------Alternative to above-------------------------------->
<a href="#">
<img id="img-B" src=""
alt="" width="66" height="20" /></a>
<p>: 0 items</p>
<!----------------------------------------------------------------------->
</div>
</div>
</body>
</html>
I have a page that I am generating that I would like to have the images (in a box) placed in 3 columns. I generate the code via a simple php script but it only creates a single column. I have a #pagePane selector around a #bodyPane selector and have a number of selectors of the form #appDivXY where X and Y are the column and row I want to put them in. #pagePane { width : 800px; position : relative; table-layout : fixed; text-align : center; margin-left : auto; margin-right : auto; } #bodyPane { width : 800px; position : inherit; margin : 5% auto; } and a series like the following: #apDiv00 { position : absolute; width : 250px; height : 250px; top : 100px; left : 25px; border : thin; border-color : #000000; border-style : solid; } #apDiv10 { position : absolute; width : 250px; height : 250px; top : 100px; left : 275px; border : thin; border-color : #000000; border-style : solid; } I have validated the code and only get some minor warnings about colors. The full page can be generated at mandp dot lamster dot org slash french40sx.php I am sure (or I hope anyway) that I am doing something trivialy wrong but I have no idea what it could be. I have been playing with this for hours. Thanks for any help. Hal |
|||||||