|
CSS - Site Layout Question
I'm working on www.wirelessguy.net and I'm trying to add something to my layout.
I want to have an outer box that surrounds the content and then add left and right borders to it so I can change the outside background color. I'm currently using 10% left/right margins to get the material in the middle of the page. Here is my css for the outerbox: Code:
div#outerBox
{
margin-left:-5%;
margin-right:-5%;
border-left: 1px dotted red;
border-right: 1px dotted red;
width:100%;
height:100%;
}
When I do this I get the following result: www.wirelessguy.net/index2.php Any ideas on how to get the box to be made with negative margins? Similar TutorialsHi, I run this Farsi site and yesterday, I posted a few articles and suddenly I noticed my sidebar is out of its place! It is using wordpress and I must say, I did not change any css or did anything with the theme...just did normal posting. Would you kind people tell me how I can find out where the problem is in these cases? I checked to see if there is any extra code in the text of the articles recently posted, but found nothing...pure text and few <a> and <img> html tags.... size of the pictures are also moderate as you can see... I know you can't read the text, but where do you think I should look for the problem? the site address is (oh i can't post links!!!) please use 'punez' dot 'nafice' dot 'com' (it's a subdomain) Hello all - I wondered if anyone can help. I have created a site using html and css and seem to have a problem with the layout - see http://www.mysimplestore.com/ I have used <div>tags to define the different sections of the website in terms of a main container, header, left hand side, main content and a footer. When I look at the site in Internet Explorer there is gap between the search bar and the start of the text and I would like to reduce this gap. I have tried an number of options without success. Can anyone help? Thanks Techmog I have been working with css for a while but web design is just a hobby for me so I am not that good when it comes to advanced css. The problem that I am having is that IE is not rendering me page right and I am not sure if it also supports png transparency be cause me background images are not coming out right. Everything for this page work just right in FF but IE is a whole other story. So if somebody could check out my site and suggest changes that I could make so that it does work right in both that would be awesome. My Site and here is me css file css Code: Original - css Code /* Basic style sheet */ html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset { margin: 0px; padding: 0px; border: 0px; } body{ background-image: url(../images/thumbBG.gif); background-repeat: repeat; color: #999999; font-family: Arial, Helvetica, sans-serif; font-size: 100.01%; text-align: center; } #wrapper{ width: 800px; text-align: left; background-color: #1A1A1A; } #rightshadow{ width: 850px; margin-left: auto; margin-right: auto; background-image:url(../images/rightshadow.png); background-position: right top; background-repeat: repeat-y; /*background-attachment: inherit;*/ } #leftshadow{ padding-left: 25px; background-image: url(../images/leftshadow.png); background-position: left top; background-repeat: repeat-y; /*background-attachment: inherit;*/ } #banner{ height: 135px; background-position: center; background-repeat: no-repeat; background-image: url(../images/banner2.jpg); } #nav{ height: 10px; background-color: #000000; text-align: center; margin-bottom: 10px; } #nav ul{ padding: 0px; margin: 0px; background-color: #000000; } #nav ul li{ display: inline; padding: 0px; margin: 0px; } #nav ul li a{ font-size: 80%; color: #FFFFFF; background-color: #000000; text-decoration: none; padding: 0px 25px 0px 25px; text-align: center; width: 9em; } #nav ul li a:hover, #nav ul li a:focus{ background-color: #D0EB5A; color: #000000; } #usepic{ height: 110px; width: 104px; border: 1px solid #000000; background-color: #000000; margin-top: 5px; margin-bottom: 15px; margin-left: 5px; } #user{ float: left; width: 115px; background-color: #000000; text-align: center; margin-top: 10px; margin-left: 13px; } /* html div#user { width: 20px; top: 38px; left:20px; position:absolute; }*/ #content{ margin-top: 10px; margin-right: 23px; margin-bottom: 4px; float: right; width: 625px; } .containAll{ background: #000000; margin-bottom: 10px; } .container{ width: 100%; float: none; margin-bottom: 10px; } #content p{ font-size: 80%; margin: 20px; font-weight: bold; } #content h1{ font-size: 130%; color: #003366; padding: 0px; margin: 20px; } #content h2{ font-size: 110%; color: #D0EB6A; padding: 0px; margin: 20px; } hr{ visibility: hidden; } .leftimage{ float: left; margin: 0px 10px 20px 0px; border: 1px solid #000000; } .rightimage{ float: right; margin: 0px 0px 20px 15px; border: 1px solid #000000; width: 150px; } .container hr{ clear: both; visibility: hidden; } hr{ visibility: visible; } #footer{ border-top: 1px solid #000000; background-color: #C0DB5A; color: #000000; clear: both; } #footer p{ padding: 3px; font-size: 70%; } #navcontainer{ font-size: 12px; width: 100px; margin-left: 5px; margin-bottom: 5px; } #navcontainer ul{ margin-left: 0px; padding-left: 0px; list-style-type: none; font-family: Arial, Helvetica, sans-serif; } #navcontainer a{ display: block; padding: 1px; width: 100px; background-color: #333333; border-bottom: 1px solid #1A1A1A; } #navcontainer a:link, #navlist a:visited{ color: #EEE; text-decoration: none; } #navcontainer a:hover{ background-color: #D0EB5A; color: #000000; } /* clearing ----------------------------------------------- */ .clearfix:after { /*content: "."; */ display: block; height: 0; clear: both; visibility: hidden; } * html>body .clearfix { display: inline; width: 100%; } * html .clearfix { /* Hides from IE-mac \*/ height: 1%; /* End hide from IE-mac */ }
Hi, can you take a look at my site: www vitacam com in both IE7 and Firefox and let me know if you see anything in the code that is causing the layout differences? Everything's all bunched together in Firefox but it looks right in IE. Thanks, Shane Hi. I'm making a registration and login pages with some additional information, and I'm wondering how to make them tableless? What I'd do with tables is put table in a table, because I want to do something like this: A 640px (or any other value) width box in the center of the screen, in which there is another box under some text, which is borderless login box. Same would go for the registration box. And without tables - I have no idea how to do it. Not sure if this is the right section, sorry if it isn't. Thanks. this should be simple, but i just don't seem to have the hang of css yet what i want right now is a div for the links and stuff at the top, a bar on the left with the content to the right, and then the footer for more links and stuff, basically something like this site http://www.c21homeservices.com/common/mkttrends.php?mtt=selling only using css the man problem right now is that i can't get the content box positioned so that it has a 5px border around it or something so you see its parent box as a border and as more content is put into it the page justs gets longer at the content box with its parent moving with it maybe just looking at what i have will help more the HTML Code: ...... <body> <div id="all"> <div id="head"> Head Section </div> <div id="main"> Bar <div id="content">Content Goes Here</div> </div> <div id="footer"> footer </div> </div> </body> </html> and the css Code: body {
background-color:#ff0000;
}
#head {
height:200px;
}
#all {
margin-left:3%;
margin-right:3%;
background-color:#a0a0a0;
}
#main {
background-color:#ff00ff;
}
#side_bar{
background-color:#99ff99;
}
#content{
position:relative;
float:right;
width:80%;
right:10px;
background-color:#ffffff;
padding:5px;
}
#footer {
height:200px;
}
those funky colors are so i can see the divs hi at my workplace they have asked me to create a simple html page which will be used as a small widget in a website. as per the requirement in the html file. i should not use an external stylesheet and also no embedded style however i should write the page completely using inline css. all this is fine. however my question and issue i am facing is with adjusting height as the content increasing when i give for example margin or padding. please check out this link where i have created an image of what i am creating as html page using inline css. http://www.sudhakargolakaram.co.in/form.html as per the image there is an outer div which has the light blue background color which i have created like a container div with the background color the dark blue rectangles are 3 images and the white color on the right with the rounded rectangle at the top and bottom is where content like header tag, img tag, forms etc will be used. lets say for example i divide the images and content as 2 divs floating left with images div as 100px and content on the right as 300px width so a total of 400px and a total height of 300px based on the design that i have the total width is 400px (left div with images=100px and right div with content=400px) and total height is 300px for example. i am ok with the left div as the images have a fixed width and height, the problem i am facing with is the content div. as the content div contains header tags, a small paragraph information within p tag, a small form with about 2 to 3 form fields, in order to add all these elements as per the design i am using padding top, padding bottom and if needed margin top and margin bottom. so due to this the content may go beyond the bottom div which has the rounded rectangle at the bottom, and this is not how it should appear the entire content should sit inside the 300px height in the right div so do i have to keep subtracting the amount of padding and margin i am using from the height value of the right div so that the content sits inside within the total 300px height. how do i go about this height aspect which i am having issue with and also is there something specific that i have to keep in mind for ie6 browser. for the left and right div do i have to use #left{ float: left; width: 100px; height: auto; } #right{ float: left; width: 300px; height: auto; } or do i have to specify the fixed height which is 300px for #left and #right divs also in the #right div i am using 3 inner divs 1 for top rounded rectangle background = { background: url(topbg.jpg no-repeat; width:300px; height: 10px; } 2nd div with white background color no background image= do i have to specify a fixed height for this 2nd div = { width:300px; height: ; } 3rd for bottom rounded rectangle background image = { background: url(bottombg.jpg no-repeat; width:300px; height: 10px; } any help will be greatly appreciated. thanks. I'm building a simple gallery site for my old man, who wants a place to upload his artwork. I've made all the slices in ImageReady for the images around the edge of the screen, and customised the code so that they fit to any resolution. I'm having a problem with the DIV tag that I would like to contain the main section of the site. I would like it to fit the gap in the middle - whatever size that may be - so it can scroll if necessary later on. As it is though, it just wraps around whatever content I put there. Here's the stylesheet code for that particular DIV: Code:
#vg-09 {
position:absolute;
margin-top:183px;
margin-left:49px;
margin-right:56px;
margin-bottom:97px;
background-image: url(images/vg_09.gif);
}
I thought those margins would make it meet the surrounding images, but it doesnt work. I've also tried setting the height and width to 100%, but then it extends beyond the size of the screen and looks ugly after scrolling. Here's the Page: http://vic.retina-designs.com Does anyone know how I can get that DIV layer to sit flush against all the surrounding images? Thanks for any help! EDIT: Added the link 'ello question, right.. a table sumthing like dis.. <table style="width: 100%"> <tr> <td style="width: 200px;"></td> <td></td> </tr> </table> gives ya a nice two column layout, where the first has a fixed width, and the second column fill the rest of the parent container. Also, heres the kicker.. when u get loads of content in the second column, and it get extended vertically, the second container is as well.. and thats nice and all.. So, question.. how do i do this with divisions and CSS? i tried a ton of different stuff, and the closest thing i came was using height: 100% and like, scrollbars in the second column. But i dont really want that.. I think like, min-height is the solution, but a cant tame it, when i start using it.. things goes weird :P the table model works, but i really want to lean to do this "right" so, lill' help please? cheers, I would like to create a 2-column layout with a content area on the left and a "sidebar" area on the right. Pretty standard, right? Now the trick: on some pages, the sidebar will be absent, and I want the content area to then overflow the whole page width. I tried the following: Code: <div style="background-color: red; float: left;">content area text</div> <div style="background-color: blue; width: 200px; float: right;">sidebar text</div> When div #2 is excluded, div #1 of course expands to take up the whole page width. So that works. The problem is that when they're both present, and div #1 has a lot of text, it just pushes div #2 down a line. Note: The reason div #2 will sometimes not be present is that Drupal is generating the page, and plain leaves out div #2 if there's no content in it. It's not just empty -- it's not even included in the page. Can anyone help me accomplish this? I've looked at a lot of liquid layouts, but none seem to do quite this. I am working on this website : http://five-art.com and the code for the nav bar is : Code: <div class="content"> <table><tr><td><h1>[5]Art</h1></td><td class="navtop"> :: <a href="index.php">Call for Submissions</a> :: <a href="ms.php">Mission Statement</a> :: <a href="past.php">Event Archive</a> :: <a href="members.php">Members</a> :: <a href="contact.php">Contact Us</a>.</td></tr></table> </div> I added the table so that I could have two different font sizes without the text going to the next line. What would be the best way to do this with css. Thanks! Hello All, I've had great luck with this site helping out in the past. My main question I want to ask today is just to see if others think that I have layed out this page as efficiently, and as easy to work with cross-platform as I can. Because I'm having problems with IE on XP looking good with it, whereas it looks good on Mac. If you have suggestions of how to lay things out differently, I'd really appreciate it. Here's the site: http://www.genius-creative.com/index2.html Here's the attached CSS: http://www.genius-creative.com/geniusall.css Thanks a million! -Brandon So I just started working on my first complete website in a couple years and needless to say i'm behind the times in regards to layouts. I want to use CSS, more specifically DIVs to layout my site. I created a background in Photoshop that will serve as a guide for where I want the various boxes/text. I've done extensive searching and reading on the different kinds of positioning you can do with DIVs. Whether it be absolute or relative or float. But I have yet to figure out the proper way to code in the various DIVs so that they remain in the same spot no matter the resolution of the screen or if someone resizes the window. I just want to be able to tell them where I want them and not have to worry about them moving. The way I have it coded now, the DIV moves around when I resize the window - something I don't want. Any help would be greatly appreciated! Like I said I'm just getting back on my feet when it comes to HTML/CSS and i'm a bit rusty. Thanks!! 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" />
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
<style type="text/css">
body {
font-family: 'Lato', sans-serif;
margin: 0;
background: #0C0 url(landscaping1.jpg) no-repeat center top;
}
#leftcontent
{
border:1px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
height:300px;
border-radius:12px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
box-shadow: 10px 10px 5px #888888;
float:left;
position:relative;
top:450px;
left:80px;
}
</style>
<title>Mueller Lawn and Lanscape 2012</title>
</head>
<body>
<div id="leftcontent">
Some text goes here.
</div>
</body>
</html>
Also, here is what the site looks like with the above code. Obviously i'm still working on the visual aspects of the site, so disregard that part for now. http://i110.photobucket.com/albums/n120/infantryclothing/0cb6b676.png Hello all. I have implemented a sort of 3 column layout on part of a site I'm working on: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>My site</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
#content {
line-height: 130%;
padding: 1em;
clear: both; } /* end #content */
#column_1 {
padding-left: 1em;
padding-right: 1em;
float: left;
background: red;
width: 33%; } /* end #column_1 */
#column_2 {
margin-left: 36%;
background: green;
padding-left: 1em;
padding-right: 1em;
width: 25%; } /* end #column_2 */
#column_3 {
float: right;
background: blue;
padding-left: 1em;
padding-right: 1em;
width: 33%; } /* end #column_3 */
.clearfix:after {
content: ".";
display: block;
height: 0;
font-size: 0;
clear: both;
visibility: hidden; } /* end .clearfix:after */
.clearfix {display: block;}
/* Hides from IE5/Mac \*/
* html .clearfix {height: 1px;}
.clearfix {display: block;}
/* End hide from IE5/Mac */
</style>
</head>
<body>
<div id="content">
<div class="clearfix">
<div id="column_1">
<p>Column 1</p>
<p>Line 1</p>
<p>Line 2</p>
<p>Line 3</p>
</div>
<div id="column_3">
<p>Column 3</p>
<p>Line 1</p>
<p>Line 2</p>
<p>Line 3</p>
<p>Line 4</p>
<p>Line 5</p>
<p>Line 6</p>
<p>Line 7</p>
</div>
<div id="column_2">
<p>Column 2</p>
<p>Line 1</p>
<p>Line 2</p>
<p>Line 3</p>
</div>
</div>
</div>
</body>
</html>
In FireFox and Safari, the colors line up but the text does not and in Opera the text lines up but the color does not. There's a rendering problem with IE that I will address later. The solution I would like to achieve would be to have the text and the colors lining up. What would be the best way to achieve this? I have a layout question for which I will reference Dan Cederholm's site, http://www.simplebits.com. He has a two column layout, div#content on the left and div#sidebar on the right, both are contained by div#main-body. #content is floated to the left and #sidebar is floated to the right. How is he #main-body to extend the entire length of the page without containing some normal flow elements? I have attached an image that encapsulates ideally how I would like the page to look. I'm having troulbe having left nav, body text lining up. Basically I want the background of the center box to be white, but the wrapper is not "clearing" all the divs in the center box. So the bg appears black. I would also like the body color and left nav color to ALWAYS line up at the bottom. However they need to be able to strecth when content grows. Any help would be greatly appreciated! I'm pretty new to CSS and love it, but this has really got me stumped. View how I would "like" it to look http://urbaneffect.com/test/layers_image.gif View Page here http://urbaneffect.com/test/ CSS FILE Code:
/* this centers the content*/
#wrapper{
width: 765px;
margin-left: auto;
margin-right: auto;
text-align: left;
position: relative;
background-color:#FFFFFF;
}
#headerBlock{
z-index:2;
position:absolute;
top:0px;
margin-left:15px;
}
#bodyBlock{
position:absolute;
top:70px;
}
#leftNav{
width: 182px;
float: left;
height: 300px;
margin-right: 10px;
background-color:#666666
}
#innerContent {
float: left;
padding-left: 12px;
padding-top: 20px;
background-color:#FFCCCC;
width:550px;
}
Hello on this page, the author shows a 3 Column Liquid Layout based on CSS percentage use. http://matthewjamestaylor.com/blog/perfect-3-column.htm The column layout is 2,1,3 (center page comes first in the html code). He states "The columns can also be configured to any other order if required." How to do the column configured as 1,2,3? (left, middle, right)? Does anyone know how I can place two adjacent divs to fit the full width of the browser when one div is a set pixel width and the other i think has to be %? Here's my code: Code: <div style="position: absolute; top: 0px; left: 0px; width: 260px;"> <a href="http://www.thencollection.com/"><img src="images/logo.jpg" width="260px" height="55px" border="0" alt="The N Collection Logo" /></a></div> <div style="margin-left: 260px; width: 100%; height: 55px; background-color: #FFDC00;"> </div> Right now the header extends the browser width. Thanks in advance! Hi all, I have a problem with a website I am trying to build. The website is designed to be in three colums with the centre one containing the site content. Both the left and right column contain only a background image that provides the site good aesthetics. Below are links to diagrams of both how the site is currently displayed, and how i would like it to be displayed; http :// securetransaction .co .uk /orangepi /images /2.jpg http :// securetransaction .co .uk /orangepi /images /1.jpg Any help would be greatly apreciated, i can provide the current code if necessary. Cheers For IE, I have used text-align:center; to define the body tag, which allows the entire website to be centered no matter the browser window size. That method doesn't seem to be working for Firefox, yet I have seen it done before. A few of my divs are using absolute positioning (NOT absolute to the document, mind you, but to a parent div). Could this affect anything? Again, it works fine in IE, but not in Firefox or Safari If body {text-align:center;} is not a good centering tool, I would love any other suggestions. Thanks! |
|||||||