|
CSS - Why Won't They Push Together??
My problem:
There's a banner at the top, but it won't push to the very top or left of the page. There's a padding on the entire page somehow, and I have no idea how to get rid of it. In addition, my nav bar will not come in direct contact with my #main div. I have no idea why, I can't figure it out. I've tried margin:0; on a lot of them, and I have nothing. No idea how this isn't working. Thanks guys! HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <link rel="stylesheet" type="text/css" href="layout.css"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <img src="placeholder.jpg"> </head> <body> <div id="wrapper"> <div id="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">About</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Cart</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> <!--Close #nav--> <div id="main"> <p>Insert Content Here</p> <p>Insert Content Here</p> <p>Insert Content Here</p> <p>Insert Content Here</p> <p>Insert Content Here</p> <p>Insert Content Here</p> <p>Insert Content Here</p> <p>Insert Content Here</p> </div> <!--Close #main--> </div> <!--Close #wrapper--> </body> </html> CSS: Code:
@charset "utf-8";
/* CSS Document */
body {
background-color:#000;
font-family: arial, helvetica, sans-serif;
margin: 1em;
}
#wrapper {
margin: 0em auto;
}
#main {
/* margin-left: 6em;*/
background-color:#333;
color:#FFF;
}
/*
NAV PORTION
*/
#nav {
margin-right: 5em;
text-shadow:#000 0.2em 0.2em 0.2em;
}
#nav ul {
list-style-type:none;
display:inline;
}
#nav ul li {
display:inline;
}
#nav a {
display: inline;
color: green;
background-color: navy;
/* width: 5em;*/
padding: .2em .5em;
text-decoration: none;
font-size: 1.25em;
border: .1em solid #F0F;
margin:0;
}
#nav a:hover {
background-color: blue;
color: dark green;
}
Similar TutorialsHi! I wanted to add image to the right of the entry form. I managed to do it, but now all stuff is pushed down. Is there ant way to put form and image about 200px up? Yiou may see page he degis.lt/index.php?option=com_contact&view=contact&id=1&Itemid=3 Okay so i have this: http://www.prxa.info/area51/ A left and right float, is there a way to push them together? I can't seem to figure out the reason that they are so far apart? Suppose I have: 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>
<script type="text/javascript">
//**********************************************************
// This function adds another field to the form based on
// what field name is passed in.
//**********************************************************
function add_item(field) {
if(!document.getElementById) return; //Prevent older browsers from getting any further.
var field_area = document.getElementById(field + '_field');
var all_inputs = field_area.getElementsByTagName("input"); //Get all the input fields in the given area.
// Find the count of the last element of the list. It will be in the format '<field><number>'. If the
// field given in the argument is 'friend_' the last id will be 'friend_4'.
var last_item = all_inputs.length - 1;
var last = all_inputs[last_item].id;
var count = Number(last.split("_")[1]) + 1;
if(document.createElement) { //W3C Dom method.
var li = document.createElement("li");
var input = document.createElement("input");
input.id = field+count;
input.name = field+count;
input.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc.
li.appendChild(input);
field_area.appendChild(li);
} // end if(document.createElement)
else { //Older Method
field_area.innerHTML += "<li><input name='"+(field+count)+"' id='"+(field+count)+"' type='text' /></li>";
} // end else
} // end function add_item(field)
//**********************************************************
</script>
</head>
<body>
<form>
<table>
<tr>
<td><label for="images">Images (for banner and sidebar)</label></td>
<td>
<ul id="images_field">
<li><input type="text" id="images_0" name="images_0" /></li>
</ul>
</td>
<td><input type="button" id="button" value="Add another image" onclick="add_item('images');" /></td>
</tr>
<tr>
<td colspan="3">
<label for="misc">Misc. (anything that falls outside of the above categories)</label><br />
<textarea rows="3" cols="3" id="misc" name="misc"></textarea>
</td>
</tr>
<tr>
<td colspan="3"><input type="submit" id="submit" value="Submit project" /></td>
</tr>
</table>
</form>
</body>
</html>
When I click the add another image button, it will create a new form field for another image. But it keeps stacking them on top of the elements below it. I would like for everything below it to be shifted down when a new element is inserted. I tried the clearfix method but couldn't get it to work. Thoughts? Edited to say that this behavior only appears in FireFox. Hi, This is my first post, and I am grateful for any help. I am new to CSS and I have read and absorbed Simon Collison's very good book "CSS Web Development." My question is quite simple. I have a background-image associated with an ID (shown below) which successfully lays down the image but it does not push text. #mainmenu{ background-image: url(images/mainmenubg.jpg); background-repeat: no-repeat; background-position: top center; text-align:left; } ie, my html or php file might read: <div id="mainmenu> <p>Some text blah blah </div> and the text goes right over the image. Is there a "best way" to ensure that the text appears below the image? I can apply a height variable to the id, and then place the text below the /div, which works, but it is not flexible, ie, if I change the size of the image, I need to adjust the height value, and I am trying to avoid this. Any help would be greatly appreciated. Thanks, Pradhan I have a drop down menu that drops behind my flash element. is there a way to push the flash behind the menu in CSS? Hello, I've had an issue for a while where when the text on the page gets to a certain point it just overlaps the Copyright Information which I want to stay at the bottom of the page. --- (I did look at older forum posts, but with no resolve) --- In the CSS code, I have the copyright (a.k.a. .footerlinks) set with an "Absolute" Position which I know is probably "part of" or "the" problem, but if I change the Positioning the footer ends up on the top of the page or somewhere I don't want it. (** Unfortunately due to New Members not being able to post hyperlinks I am unable to give a link to the webpage or CSS page for viewing. **) But, I have included the code snippet I use for the Footer itself and the "container" and "body" code whether its needed..... body{ margin:0; text-align:center; background-color: #FFFFFF; } .container{ position: relative; width:965px; margin:0 auto 0; height: 100%; } .footerlinks{ position: absolute; top: 1140px; left: 237px; width: 551px; font-size: 75%; font-family: verdana; text-align: center; } CSS is quite new to me so be as specific as possible as to what I should be looking at changing in my code.... Your assistance is much appreciated! Thanks! Dan - I'm attempting to get it so when the main content div exceeds my min-height specifications, that it expands the div, which in turn expands the container with an absolutely positioned footer at bottom:0;. Works fine in all newer browsers with the exception of IE7. What do I need to do to get it to expand in that version? Here is the link to the page: http://www.chcs-ut.com/chcs-new.php And the stylesheet: http://www.chcs-ut.com/css/style.css Also, I would really rather not have to specify a min-height for my main content div. I'd rather just have it automatically fill to 100% of the main container that is set to 100% height and min-height, so that the footer automatically appears at the bottom of the screen if the content is not large enough to push it down there by itself. Can't seem to get it to work, though (in ANY browser) without specifying a min-height for the main content div. Problem with that is different resolutions/browsers would require a different value, so hard-coding it isn't a desireable solution. Any thoughts? EDIT: Both problems were fixed by adding "height:auto !important" to my main content container, instead of specifying a "min-height". Works across the board! Is there a way I can have a div on my page that does not expand the window area (creating scrollbars) when the browser window is too small? I ask because I have a three-column layout, but the left and right columns are merely aesthetic-- they hold no content. The center column is 1000px, which is my limit. So if a user has a screen resolution of 1024 pixels wide, I don't want the left and right columns to cause there to be scrollbars. If my far-left and far-right column divs weren't a set width, that would solve my problem-- but then I need multiple background-images, which is only compatible with Safari. I could also make the <body> have "overflow:hidden", getting rid of scrollbars altogether... but then the valuable content on the middle column would be hidden if the browser window is too small-- plus you wouldn't be able to scroll down! Any ideas? Hi There - Am converting another design from tables, working with a CMS (Drupal) and an existing CSS / table combination that I didn't write and have no choice about. Think of the header as having three sections. The top section has logo on the left, search box on the right. Rounded corners. I'm cool with that section. Then there's a space. Created a div for the space. Love the space. Problems with the space in IE. Will go into it later. Then there's the next section. Rounded corners. Contains the entire page. On the left is a pulldown menu, about 1 cm from the top. On the right is a tabbed menu. This menu has flexible height. It needs to be right up against the bottom with the menu below it. Call this section the tabbed menu section. Third section. Immediately below that is a bar menu like the one Apple's got. Looks like a metal bar with divisions. Call this primary links. ---------- First, the space between. In IE, when you roll over the bar menu, the space disappears. Won't come back. Initially, in the second section, floated the pulldown menu left and the tabbed menu right. That worked fine, except that the tabbed menu had a width of 100% and pushed up the pulldown menu so the section was too wide. When I put it to 65%, all hell broke loose with the bar menu in the third section below it and bits of it snuck up into the second section. If I left it alone, and left the tabbed menu at 100%, when I checked over its container with firebug, it said that it was being affected by the primary links. I figured that out also because the background for that container was a really weird color that I finally found in the background of the navigation id and changed to white. Primary was overlapping it so I couldn't see it with firebug. So after fiddling with several clearing methods, I gave up and decided to try a table. Table worked fine, and the second section looks good except that there's a one pixel space between the tabbed menu and the bar menu. --------- It is my greatest wish right now to be able to float the pulldown to the left, the tabbed menu to the right and have the primary links stay below. I wish I could get the space to work and I wish for a clear understanding of it all so I can then figure out where to put the corners. Anyone who can enlighten me on this would have my undying gratitude. I've been working on this all day and the deadline's tomorrow. Code: <div id="top part" logo and searchbox </div> <div> that pesky space that disappears in IE when roll over primary links </div> <div id=navcontainer> dropdown and tabbed menu </div> <div id="navigation" class="menu> <!-- couldn't find the menu class in the css --> <div id="primary" class="clear-block"> contains barmenu - very fussy </div> </div> Here's the relevant CSS: Code:
div#navigation {
background: #fff url(../images/blue/menu-bg.png) 100% 100% repeat-x;
}
#primary {
line-height: 30px;
}
#primary ul {
padding:0;
margin:0;
list-style:none;
}
#primary li {
display:inline;
}
#primary a {
font-weight:bold;
display:block;
float:left;
padding:0px 14px 0px 14px;
margin: 0px 1px 0px 0px;
font-size: 95%;
}
#primary a {
background-position:0% 0px;
}
#primary a:hover {
text-decoration: none;
background-position:0% -42px;
}
#primary a.active {
background-position: 0% -84px;
}
#primary a {
background: url(../images/blue/menu-div.png) 100% 0 repeat-y;
color:#666666;
font-size: 120%;
font-family:Arial,Helvetica,sans-serif;
}
#primary a:hover {
color: 666666;
background: #B8B8B8;
}
#primary a.active {
color: 666666;
background: #B8B8B8;
}
|
|||||||