|
CSS - Needing Some Help With Positioning Of Page Elements
Ok well the boss asked me to do a XHTML/CSS version of the website and get it up to snuff with web standards. Now I've done the coding to get the site to look the same in XHTML as it did before in HTML and tables... but there is one catch. I can't quite get my head around the easiest way to deal with captions underneath pictures. For example look at this page:
http://www.zeroonedesign.com/aboutus.html Now in my version I haven't got the picture of the guys, or the "navigating our portfolio" bit. Take a look at my version he http://obelix.ca/zeroone/aboutus.html I was thinking about creating little block divs and positioning them absolute on the page... but that doesn't seem like much of a solution as I could see the stylesheet growing considerably if there was a page with a lot of these pictures with captions. Any reccomendations? How do you guys do captions with pictures? Similar TutorialsI have a header set up as a div. Inside the header are three elements: #logo, #picture and #contact_info. #logo and #picture are images (image tags in the "html") and #contact_info is a div. I want #logo to float to the left (no problem), #picture to float to the right (problem), and #contact_info to be flush against #picture's left side. How might I accomplish this? Nothing is positioning correctly except #logo. the (pertinent) css is: Code: #main {
width: 875px;
background-color: #FFCC77;
border-style: inset;
border: 2px solid #008080;
margin-left: auto;
margin-right: auto;
}
#header {
width: 875px;
height: 177px;
margin-left: auto;
margin-right: auto;
background:url("gradient2.jpg") repeat-x;
border: 2px solid #008080;
}
#logo {
width:300px;
height:155px;
float: left;
}
#contact_info {
color: #800080;
font-variant: small-caps;
font-family: sans-serif;
font-weight: 500;
font-size: 14px;
padding-top:0px;
padding-right:10px;
float: right;
}
#picture {
width: 160px;
height: 139;
margin: 10 10 10 10px;
}
The html is: Code: <body>
<div id="header">
<img src="Styles/redonelogo.jpg">
<img src="Styles/picture.jpg">
<div id="contact_info">
<p>Casa Grande Acclaim Realty<br/>
11283 N. Henness Road<br />
Casa Grande, Arizona 85194 <br />
Phone: (520) 560-8366 <br />
Fax: (520) 421-1444
</p>
</div>
<div id="slogan">
Serving All of Pinal County
</div>
<ul id="nav">
<li><a href="About" target="_self">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="index">Home</a></li>
</ul>
</div>
<div id="main">
<div id="border"></div>
<div id="innerloop">
<div id="equal"></div>
<div id="mls"></div>
<div id="secondinnerloop">
<h2><strong>Welcome to Casa Grande Acclaim Realty</strong></h2>
<div id="PicBackground">
<img alt="slide show" src="Graphics/One.jpg" width="540" height="405" id="FirstPicture">
</div>
<script type="text/javascript">
RunSlideShow("FirstPicture","PicBackground","Graphics/One.jpg;Graphics/Two.jpg;Graphics/Three.jpg;Graphics/Four.jpg;Graphics/Five.jpg;Graphics/Six.jpg;Graphics/Seven.jpg;Graphics/Eight.jpg;Graphics/Nine.jpg;Graphics/Ten.jpg;Graphics/Eleven.jpg;Graphics/Twelve.jpg;Graphics/Thirteen.jpg;Graphics/Fourteen.jpg",14);
</script>
</div>
</div>
</div>
</body>
</html>
Firstly, I'd like to say that I've been browsing this forum for a while now, as well as sites such as w3schools, and I've found it all to be very helpful. But now I have a situation that I haven't been able to solve on my own. Essentially, I want to make a clear and simple CSS-based layout that will work across browsers and platforms. I use a Mac myself, and it's difficult for me to check for problems with Internet Explorer. The problem I'm currently having concerns layout and positioning. Here's a link to the splash page I'm working on for a student organization: http://individual.utoronto.ca/ghp/fasu2006/ Before I make the full site I want to work out layout troubles I've been having. I got on a PC and the text when viewed with IE did not seem to properly align within the opaque white box I made for it. I've been feeling a little overwhelmed with concepts of absolute vs. relative positioning, unit values such as percents, px, em, and making use of things like padding, margins etc. and I'm hoping I can get some advice. So in one sentence, here is my question: How can I position elements (text, divs, images, anything) on the screen using CSS in an efficient way that will produce a similar result in different browsers? Here is the code that I think is relevant: Code: p {font-size: .75em; font-weight: bold; margin-left: 12em;
margin-top: 8em;}
#content {margin-top: 10px; margin-bottom: 10px;
margin-right: auto; margin-left: 3em;
width: 800px; padding: 20px;
background: transparent;}
#overlayback {position: absolute; top: 8em;
left: 15em; width: 250px; height: 250px;
z-index: 0;
filter: alpha(opacity=80); opacity: .80;
background: #FFF;}
#overlaytext {position: absolute; top: 3em;
left: 15em; z-index: 1;}
h1 {font-size: 6em; margin-left: .1em;
margin-top: .75em;}
h2 {font-size: 1em; font-weight: normal;
margin-left: 9em; margin-top: -4.5em}
</style>
</head>
<body>
<div id="content"><img src="images/tower.gif" width="297" height="422" alt="tower">
<div id="overlayback"></div>
<div id="overlaytext"><h1>fasu</h1>
<h2>2006-2007</h2>
<p>coming soon</p></div>
</div>
I hope I've been clear and thanks in advance for any advice. It's very much appreciated. Hi guys, could you help me out with following issue: See this Picture for better understanding: http:// picasaweb. google.se/lh/photo/e446yLNWr_eTqkiwPK0-CA?feat=directlink WHat i have is a div container (mainContent) In which i have some text in a Paragraph <P> and in the middle of this <P> i am trying to make a box which will contain a list of links. Have no clue how to achieve this. My idea would be: <div id: mainContent> //text//<div style="???"> //Link//<div style="float:right; DONT Know how to lower vertically??"> Good ideas for where i can find a solution? Im having issues positioning a div that contains a background image. The idea is to have the image positioned in the lower right hand corner of the screen. I get it there, but then the problem is that the image floats to the height of the div it contains. i need it to just be in the bottom right hand corner. how can I do this? here is the page, im so embarrased to have to ask this but i swear, the CSS people could not have made this more confusing if they tried. http://www.doublethinkdesigns.com/main.php I'm new to CSS. But I need to position four form elements in a very thin nav bar. Here is my HTML code: Code: <div id="nav">
<div id="nav_left">
<a href="index.php">Home</a> |<a href="complete.php"> Browse All Titles</a> | <a href="author.php">About Author</a></div>
<div id="bookmark"><table width="307" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="64" valign="middle">Browse by</td>
<td width="113" valign="middle"><form action="" method="get">
Title
<select name="var" size="1">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
<option value="H">H</option>
<option value="I">I</option>
<option value="J">J</option>
<option value="K">K</option>
<option value="L">L</option>
<option value="M">M</option>
<option value="N">N</option>
<option value="O">O</option>
<option value="P">P</option>
<option value="Q">Q</option>
<option value="R">R</option>
<option value="S">S</option>
<option value="T">T</option>
<option value="U">U</option>
<option value="V">V</option>
<option value="W">W</option>
<option value="X">X</option>
<option value="Y">Y</option>
<option value="Z">Z</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="0">0</option>
</select><input type="image" class="inputbutton" src="img/input.jpg" alt="" width="15" height="15">
</form></td><td width="123" valign="middle"><form action="" method="get">Decade <select name="var" size="1">
<option value="1950">1950s</option>
<option value="1960">1960s</option>
<option value="1970">1970s</option>
<option value="1980">1980s</option>
<option value="1990">1990s</option>
<option value="2000">2000s</option>
</select><input type="image" class="inputbutton" src="img/input.jpg" alt="" width="15" height="15">
</form></td>
</tr>
</table>
</div>
</div>
And here are the applicable styles: Code: #nav {
background-image: url(../img/navback.jpg);
background-repeat: no-repeat;
background-position: left top;
border: thin solid #7a8251;
height: 25px;
width: 771px;
}
#nav_left {
width: 400px;
float: left;
text-align: left;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 7px;
padding-left: 5px;
}
#bookmark {
width: 300px;
float: right;
text-align: right;
display: inline;
padding-top: 5px;
padding-right: 3px;
padding-bottom: 5px;
}
.inputbutton {
margin-right: 3px;
margin-left: 3px;
}
select {
display: inline-table;
font-size: 75%;
padding: 0px;
}
But, the form elements are sitting low and not aligning as needed. The input buttons are sitting too high. They sit lot in Firefox on a Mac. On IE 7, the dropdowns sit even lower. I don't know what to do! Any ideas? Jeremy Hello all. I'm trying to get the form layout to mimic a table like structure so that all the input elements line up. I have the following: 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">
<head>
<title>Search Home</title>
<style type="text/css">
.csc-mailform-field label { width: 10em; }
#mailformformtype_mail { margin-top: 1em; }
</style>
</head>
<body>
<form action="contact/contact-form/" id="mailform" enctype="multipart/form-data" method="post" onsubmit="return validateForm('mailform','First_Name,First%20Name,Last_Name,Last%20Name,Email,Email,Email_Message,Ema il%20Message','','','')">
<fieldset class="csc-mailform">
<div class="csc-mailform-field">
<label for="mailformFirst_Name">First Name</label>
<input type="text" name="First_Name" id="mailformFirst_Name" size="14" value="" />
</div>
<div class="csc-mailform-field">
<label for="mailformLast_Name">Last Name</label>
<input type="text" name="Last_Name" id="mailformLast_Name" size="14" value="" />
</div>
<div class="csc-mailform-field">
<label for="mailformSuffix">Suffix (e.g. Ph.D., M.D.)</label>
<input type="text" name="Suffix" id="mailformSuffix" size="14" value="" />
</div>
<div class="csc-mailform-field">
<label for="mailformEmail">Email</label>
<input type="text" name="Email" id="mailformEmail" size="14" value="" />
</div>
<div class="csc-mailform-field">
<label for="mailformPhone_Number">Phone Number</label>
<input type="text" name="Phone_Number" id="mailformPhone_Number" size="14" value="" />
</div>
<div class="csc-mailform-field">
<label for="mailformCompany">Company/Institution</label>
<input type="text" name="Company" id="mailformCompany" size="14" value="" />
</div>
<div class="csc-mailform-field">
<label for="mailformEmail_Message">Email Message</label>
<textarea name="Email_Message" id="mailformEmail_Message" cols="14" rows="5"></textarea>
</div>
<div class="csc-mailform-field">
<input type="submit" name="formtype_mail" id="mailformformtype_mail" value="Send Message" class="csc-mailform-submit" />
</div>
</fieldset>
</form>
</body>
</html>
I thought that by setting the width of the labels, it would force the inputs to all line up but apparently this does nothing. Also I did not place the size attributes on the input, this is a form generated by a CMS. I'm new to css. I learned how to center a layout so it stays in the center of the browser when the browser is resized, but now I am having trouble trying to place elements inside the boxes I create. When I create a box and put it inside my main layout box i give it a position as to where I want it to go, but when I go into the browser and resize the browser the box stays where it is, and doesn't move with the rest of the page. the same happens for the text i put inside boxes. I guess I'm not supposed to assign an absolute value to the boxes, but how else to I get it where I want it? It's driving me crazy! this is my html:<body> <div id="container"> <div class="box"> <h1>Silver City Food Co-op</h1> <p1>520 North Bullard Street - Silver City - New Mexico - 88061 - Phone: 575-388-2343 - Monday-Saturday: 9am-7pm</p1></div> <div class="box1"><p>The Silver City Food Co-op is a member owned full-line grocery store featuring natural, organic, and local foods, everyone can shop the Co-op, anyone can become part owner of the Co-op!</p></div> <div class="box2"><div class="box3"><p2>Food News</p2></div></div> </div> </body> </html> this is my CSS body{background-color: #69916D} h1{color: #FFF; Font-family: Georgia, "Times New Roman", Times, serif; font-size: 46px; letter-spacing: 7px; font-weight: normal; margin: 0 0 0 130px} p1{font: Arial, Helvetica, sans-serif; letter-spacing: 2px; font-size: 10px; color:#FFF; margins: 0 0 0 30px} p{font: Arial, Helvetica, sans-serif; margin: 0 0 0 10px} div.box {height: 150px; width:750px; border: 0px solid; border-color: #000; background-color: #166501} div.box1 {height: auto; width: 750px; border: 1px solid black;background-color: #FFF; position: absolute; Top: 200px; z-index:2} div.box2 {height: 500px; width:750px; border: 0px solid; border-color:#000; background-color: #FFF9F6; z-index: 1} div.box3{height:auto; width: 200px; border:1px solid; border-color:#000; background-color: #FFF; position:absolute; top: 300px; left:152px} body { text-align: center; } #container {margin: 0 auto; width: 750px; text-align: left } Thanks for the help!! How do i layout elements within a div without effecting everything outside the container div? this has been frustrating me, everything on the page seems to get effected. i want the div (question) and the div (answer) next to each other..... i thought position:relative does this since it changes position from the container div. The below code has the div(answer) below the div(question). I put top:0px; and position:relative assuming they both start at the top of the container div. Code: <div id="adult"> <?php echo "<ul><li>test1</li></ul>"; ?> </div> <div id="qanda"> <?php echo " <div id='questions'> <ul id='questionsul'> <li><font color='#FFFFFF' face='Century Gothic' size='5px'>QUESTION</font><font color='#FFFFFF' face='Arial' size='5px'>?</font></li> </ul> </div> <div id='answers'> <ul id='answersul'> <li><font color='#D99C29' face='Century Gothic' size='5px'><a href='answer.php?id=1&search=$search' style='text-decoration:none' class='Options6'>Answer</a></font></li> </ul> </div> "; ?> </div> <div id="amount""> <?php echo "<ul><li>test3</li></ul>";; ?> </div> <div id="results"> <?php echo "<ul><li>test4</li></ul>"; ?> </div> <div id="contributing"> <?php echo "<ul><li>test5</li></ul>"; ?> </div> <div id="advert"> <?php echo "<ul><li>test6</li></ul>"; ?> </div> </div></div> CSS Code:
#questions{
position:relative;
top:0px;
text-align:left;
}
#answers{
position:relative;
top:0px;
text-align:right;
}
#adult{
width:700px;
margin:0 auto;
}
#qanda {
width:700px;
margin:0 auto;
}
#amount {
width:700px;
margin:0 auto;
}
#results {
width:700px;
margin:0 auto;
}
#contributing {
width:700px;
margin:0 auto;
}
#advert {
width:700px;
margin:0 auto;
}
Ok, I have a really weird problem (don't you love it when people start like that?). I have four elements absolutely positioned inside of a relatively positioned div. As you probably already guessed, everything renders correctly in FF/Moz, but screws up in IE. In the following code, please ignore any validation mistakes, as the real page does validate xhtml 1.0 strict. Code: <div id="outside">
<div id="inside">
<img id="logo" src="logo.png" />
<img id="banner" src="banner.png" />
<img id="topRightCorner" src="topRightCorner.png" />
<img id="bottomLeftCorner" src="bottomLeftCorner.png" />
</div>
</div>
Code: #outside #inside{
position: relative;
top: 0;
left: 0;
/* positioned parent */
}
#outside #inside #logo{
position: absolute;
top: 50px;
left: 50px;
/* logo */
}
#outside #inside #banner{
position: absolute;
top: 60px;
left: 75px;
}
#outside #inside #topRightCorner{
position: absolute;
top: 0;
right: 0;
}
#outside #inside #bottomLeftCorner{
position: absolute;
bottom: 0;
left: 0;
}
The first three position corectly. "bottomLeftCorner" seems to follow its own path, and aligns its self to the bottom of the "outside" div. If I remember correctly, absolute positioning of an element will position it absolutely (duh) in relation to its nearest positioned parent, which in this case is my "inside" div. Here's where it gets quirky (no pun intended) though. When I change the position attribute from "bottom" to "top", the element will gladly position its self wherever I want it, within the "inside" div. Is the "bottom" attribute causing a problem within IE? Am I trying to reference too many child ID's for IE to handle? Am I missing a rule that says the parent has to have the EXACT same atributes as the child? I assume the answer to all three is no, but I thought I'd give it a shot here anyways. Any ideas? Thanks, all! hey, I have 4 block elements like this: Code: <%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Test</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="test.css" /> </head> <body> <div id="banner"> </div> <div id="logo"> <img src="images/logosmall.png"> </div> <div id="registercontent"> </div> <div id="footer"> </div> </body> </html> and the following CSS: #banner { height: 75px; width: 100%; background-image: url(images/bg1.gif); } #logo { position: absolute; top: 30px; left: 34px; z-index: 10; } #registercontent { position: static; width: 600px; margin-left: 50px; margin-top: 50px; margin-bottom: 50px; padding-top: 20px; padding-left: 25px; font-family: verdana; font-size: 12px; border: 1px solid #39ce96; color: #39ce96; background-color: #efefef; } #footer { height: 75px; width: 100%; background-image: url(images/bg1.gif); } now I have found out that when I include the 'logo' block in the page and view the page in browser, the positioning of my 'registercontent' goes haywire (specifically, the block loses its top margin), if I take out the 'logo' block, the 'registercontent' block returns to normal behaviour. Only problem is, I don't know why..!!! help much appreciated. In this sample code, I would like the form to actually be positioned befor the things that follow it in the code, but I just can't figure out how to do this. The document I want to use it on will not be 100% CSS, and maybe even inside a table. How might this be done? You can see the code in action HERE. Code:
<html>
<head>
<title>Test</title>
<style type="text/css">
.input-box
{
color: #26a;
background: #feb;
border: #26a solid 1px
}
#div1, #div2, #div3, #div4
{
padding: 10px;
margin: 0 auto;
overflow: auto;
display: none;
border 1px;
}
fieldset
{
position: absolute;
left: 50%;
margin-left: -100px;
width: 200px;
padding: 10px 10px 10px 10px;
}
search_label
{
width: 4em;
float: left;
text-align: right;
margin: 0 1em 10px 0;
clear: both
font-family: verdana,tahoma,arial,helvetica,sans-serif;
}
</style>
<script type="text/javascript">
//<![CDATA[
function change(which) {
document.getElementById('div1').style.display = 'none';
document.getElementById('div2').style.display = 'none';
document.getElementById('div3').style.display = 'none';
document.getElementById('div4').style.display = 'none';
document.getElementById(which).style.display = 'block';
}
//]]>
</script>
</head>
<body onload="change('div1');">
<h1>Switch Divs</h1>
<form method="post" action="">
<fieldset>
<legend>This is my form</legend>
<label><input class="radios" checked type="radio" name="search_field" value="name" onclick="change('div1');" />Last Name</label><br />
<label><input class="radios" type="radio" name="search_field" value="city" onclick="change('div2');" />City</label><br />
<label><input class="radios" type="radio" name="search_field" value="state" onclick="change('div3');" />State</label><br />
<label><input class="radios" type="radio" name="search_field" value="zip" onclick="change('div4');" />Zip Code</label><br />
<div id="div1">
<input class="input-box" type="text" name="search_name">
</div>
<div id="div2">
<input class="input-box" type="text" name="search_city">
</div>
<div id="div3">
<select name="search_state" size="1">
</select>
</div>
<div id="div4">
<input class="input-box" type="text" name="search_zip">
</div>
<div><input type="submit"></div>
</fieldset>
</form>
<p>Some Content</p>
<table border="1" width="100%">
<tr>
<td>Some other Content</td>
</tr>
</table>
</body>
</html>
I've just been given the assignment to write a script that given a set of form elements by the user it will create a page with those form elements displayed and a submit button on the bottom. The form elements the user defines can be text fields, text areas, dropdown boxes, option groups, and checkboxes. The user also gives me a title for each form element. He can give me these form elements in any order and I need to display them in that order on the page. My question is, how do I arrange these form elements so they always look good together and I don't have funny gaps or unprofessional looking design? It would be easy if it was just text fields and area, but then I have to throw in option groups and checkboxes that can be any number in a row. Does anyone have some good form organization rules that could help me? Thanks!! Below is a sample of my CSS page, I'm having an issue with the floats that are commented out, they are affecting my th even though I haven't actually classed anything in my html... Any ideas? <code> /* CSS Document */ body { margin: 0; padding: 0; background-color: #000; color: white; font-family: "Lucida Grande"; font-size: x-small; } table.outer { border:1px solid #fff; width: 178px; } /*.left { float: left; } .right { float: right; }*/ table { clear: right; width: 700px; line-height: 1.4em; border-collapse: collapse; border: 1px solid #000; color: white; background: #000; font-family: "Lucida Grande"; font-size: x-small; }</code> Hi, Can somebody help me to style elemnts on the page using % as unit of measurement & relative positioning so they'd look like -- - 20% - -- - 80% - +----------+----------+ | Element3 | Element1 | +----------+----------+ ----------- | Element2 | ----------- +----------+ ----------- | Element4 | ----------- +----------+ or even better like -- - 20% - -- - 80% - +----------+----------+ | Element3 | Element2 | +----------+----------+ ----------- | Element1 | ----------- +----------+ ----------- | Element4 | ----------- +----------+ The html can be as simple as Code: <div id="Element1">Element1</div> <div id="Element2">Element2</div> <div id="Element3">Element3</div> <div id="Element4">Element4</div> I just figured out how to make a cool navigation bar with css, but adjusting the links in the bar also changes the style of all my other links on the page. Is it possible to have two sets of link styles, one that only applies on the navigation bar and one that only applies on my other text? The navigation bar and text each have their own div, if that helps at all. How would you go about this? Hi, I've been trying to integrate my blog into my website to look exactly the same. I am using the same style sheet for my blog as for the rest of my website. Somehow, my logo and fonts and pictures are all smaller on the blog than on the real site. I did a 'view source' and then pasted that into a file called test.php and testing different changes to my css from that file so it doesn't affect the rest of my site. The code is very similar between my regular site pages and my blog pages because I copied much of the header stuff directly into my blog template. I am totally perplexed as to the incredible shrinking page element dilemma. I'm not sure how much code to paste in here to get the best help. What do I need to provide you to help me troubleshoot? Any ideas? pe123 Hi. I have a question about how to edit specific elements in a profile page. Take this as an example; worldwideweb.teenspot.com/profiles/Mumfie Scroll down and look at the box named "Specifics". Lets say I want to edit "Location" in that section from Norway to Sweden by using CSS. What is the procedure I should follow? The page allows you to edit CSS in an advanced page editor. Should I search up the source for that page and do some modification by pasting a new code? I'm working on a site with a div element with a fixed position, some 800 pixels from the left. The site is optimized for 1024x768. However, if a user with a resolution of 800x600 views the page, this div element will be missing, and the user won't be able to scroll over to see it. Is there some way I can get around this? One idea would be to align the div on the right instead of the left, but I don't want a lot of whitespace between my content (on the left) and my div (on the right). I was hoping that I could specify a parent element with a relative position, and that position: fixed would reference the position of the parent element, but that only seems to work when the child div element is position:absolute, not position:fixed. Thanks for any insight. |
|||||||