|
CSS - Making My Site With Css Positioning
I have come to the conclusion that tables are evil, plus I want to make my site very good, web standards wise.
Thing is atm I suck at div tags etc. and I was wondering if anybody could offer insight into doing URL (relative positioning not absolute). It is a 3 column layout which I have heard can be hard. Also, how do you align div tags to the right of another e.g. my logo and then my current nav bar. Thanks p.s. please help, I want to change my wicked ways lol Similar Tutorials'Ello, This problem is a bit complex to try and explain on here so if this gets too confusing just let me know and I'll try and clear up whatever you are confused about. I am currently building a site that has a wrapper div with a width set to 100% and a max-width of 1000px so that on smaller screens the site will appear nicer and not have horizontal scrollbars. In this wrapper div is a content div that is 84% of the wrappers width and has it's margin set to 0 auto to make in then content div centre in the wrapper. What I'm wondering is if there is a way to change the content divs width from 84% to 100% once the wrapper div get to a small enough size. At the moment when the screen gets too small the content div is still 84% size of the wrapper div and centred, but say on a screen with a resolution of 800x600 I think it would be more beneficial to have to content div take up the whole wrapper to display more content. I was thinking of setting a min-width but then if the screen gets smaller than the min-width a horizontal scroll bar would appear. I was just wondering if something like this was possible, if not it doesn't matter to much as I can set the min-width up for a 800x600 screen resolution and anything below that probably isn't too important anyway. I would love for it to look like the footer on the mint.com site. Do you know how to accomplish this? 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 Hello, I sincerely apologize ahead of time for what I think to be the craziness of this request, but I'm about to go bonkers. I have a website set up for a guild through guildomatic and I have some customizations applied courtesy of another, more css-savvy individual. He used a "custom css" and some JavaScript to do some skinning so that his theme looked like another theme. I've made further tweaks using my good ol'fashioned try try until you succeed mentality (some C++/Perl experience) but there is one problem that I just can't wrap my head around. There is a navigation bar (including login/logout/register links) inside a table tagged "crumb" that no matter what I do I cannot get it centered so that it stays in the correct position when the window changes size. I would like for the "crumb" to show up above the banner and centered (the banner is centered too) so that they move with eachother whether your viewport is large or small. Am I completely missing something here or is there a rule that I'm not following? I've tried applying the "auto" setting to the right and left margins in various different levels of the structure and figure I either haven't found the right combination or I'm going about this the wrong way. I have tried disabling the custom CSS and JS to make sure they aren't interfering and I still can't make this happen so far. Any help would be greatly appreciated. Thanks for reading! -Ryan Here's the code: Code:
<body>
<div id="overDiv" style="position:absolute; visibility:hidden; z-index:100000001;"></div>
<div id="root">
<table id="root_table">
<tr id="adminConsoleContainer">
<td colspan="1">
<table class="controls">
<tr>
<td class="notices"></td>
<td class="configure">
<ul class="nav controls">
<li>
<img alt="Upgrade" class="raw_icon" src="(URL address blocked: See forum rules)" title="Upgrade" />
<a href="(URL address blocked: See forum rules)=2481105406&cep=b69e9d1e6f0577c6d79da3f5d9b8e910">Add Services</a>
</li>
<li>
<img alt="Administrator Console" class="raw_icon" src="(URL address blocked: See forum rules)" title="Administrator Console" />
<a href="/console">Administrator Console</a> </li> </ul> </td> </tr> </table> </td> </tr> <tr> <td id="banner">
<div class="ggcode">
<table cellpadding=0 cellspacing=0 width="1050" style="margin-left:auto;margin-right:auto;">
<tr>
<td width="20">
<img src="(URL address blocked: See forum rules)">
</td>
<td style="text-align:left;vertical-align:top;background-image:url((URL address blocked: See forum rules));background-repeat:repeat-x;">
<img style="align:top; padding-top:0px; width:970px; height:229px" src="(URL address blocked: See forum rules)">
</td>
<td width="20">
<img src="(URL address blocked: See forum rules)">
</td>
</tr>
</table>
<script type="text/javascript" src="(URL address blocked: See forum rules)"></script>
</div>
</td>
</tr>
<tr>
<td >
<table id="crumb">
<tr>
<td id="nav">
<div class="ggcode">
<div id="menuSection">
<a href="/">Home</a> - <a href="/forums">Forums</a> - <a href="/members">Roster</a> - <a href="/raids">Raids</a> - <a href="/items">Items</a> - <a href="/raids/attendance">Attendance</a> -
<a href="/dkp">TOPP</a> - <a href="(URL address blocked: See forum rules)">Logs</a>
</div>
</div>
</td>
<td id="user_welcome"> Welcome, Valcore. <a href="/user/logout">Log out</a><br/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</body>
k so I have a weird problem. My site snafu-comics.com basically has a main table with all the content in it and then two images on the left and right side just for added visual effect when browser windows are larger resolution than 955 pixels. But the problem is how it's setup now the left image loads (pushing everything to the right side of the screen since it touches the main middle table on the right) Then the main table loads and it takes a little while to finish loading mostly due to the ads. Then the right image loads and once it loads the whole thing pops to the center of the screen like it should. What I'm trying to do is just get the center table in the center the whole time. And then when the rest loads it loads. Any ideas? and again for ease the site is snafu-comics.com Thanks for your help! I have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values): It needs to be sticked to fit after content of 4 column DIV's like it is in example. http://www.split.info/dev/less-content/ http://www.split.info/dev/more-content/ Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title of website</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;}
#contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;}
#leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF; top: 150px;}
#rightPane {width: 173px; float: right; right: 226px; background-color:#999966; position: absolute; top: 150px;}
#rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;}
#headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;}
#header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; }
#footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="contentPane">Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
</div>
<div id="leftPane">Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
</div>
<div id="rightPane">Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
</div>
<div id="rightPane2">Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
</div>
</div>
<div id="headwide">
<div id="header">Header area</div>
</div>
<div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div>
</body>
</html>
Content from above 4 column div's need to push footer DIV below (after them)! Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx! Echo Hey all i want to create a simple horizontal navigation for my page spanning the container div (735px) i want to use a UL and float them to the left: Navigation Code: <div id="container"> <ul> <li>home</li> <li>nav2</li> <li>nav3</li> <li>nav4<li> <li>nav5<li> </ul> </div> CSS Code:
#container{width:735px}
ul {width:100%; height:35px; }
li{width:149px; float:left}
The problem im having / i dont know how to do are the following: 1. Within each li i want to put a link but i want it to be the whole block of 149 x 35 clickable for the link not just the words e.g HOME 2. how do i get the text of the nav to be positioned in the middle vertically. i tried: vertical-align or what ever it was but that didnt waork. For one of my nav items it drops down a line but the others stay at the top. id like them in the middle of the block?? thanks Hi, How common it is these days to make a web pages using only css and not using tables? And what are the pros and cons of that? Thanks i thought i had finally gotten my design to where i wanted it, but then i tried it in internet explorer. he http://beta.bikerevolution.org/xindex.php any ideas on how to fix this would be great. Ok, firstly, here is the link: www.mstrgaming.com/stars Now, if you look at the website in FF, then in IE, you'll notice that the absolutely poistioned #topbar (the horizontal bar right at the top) goes over the top of the floated logo & menu (whereas it doesn't in FF, which is the desired look). I'd welcome any suggestions as to why it does this, and more importantly how to prevent it. Also, the floated logo & menu is spaced away from the left side of the page, whereas in firefox, it isn't. I welcome any suggestions! The website is reletively simple so I don't think you should have any concerns with the code, but if you do by all means let me know . Thanks! Edit - how odd, I edited the title of this thread because I missed a word, and it won't change, oh well I was just wondering if there was a standard that most people use. Or do you just use each as the circumstances require? i have this site here and am looking for a solution to my css for resizing the window i need the .swf to appear underneath the main content box. any ideas?! i need to it to behave exactly like the .jpg on this page here anyone!? Hi, I am editing a dynamically driven site and I don't have access to edit the HTML code, just the CSS. I have a <div> with content in it within a <td> tag. When the div stretches past the width of the <td> tag it makes the table cell wider. Is there any way in CSS to have it not stretch the width of the cell? The <div> has an id="mylinks" on it, however the <td> or the <table> doesn't have any id or class on them. I'm pully my hair out trying to figure out a fix, any help would be greatly appreciated, Thanks in advance Can someone point me to a tutorial that shows how you can use css borders, shadows, or whatever to make div's look 3D, or sunken in or something. Basically I want this div to look like a button, but only when the mouse is over it, and when it's depressed I want it to look like its sunken in. I know how to do all of this except the lighting and stuff, it looks kinda funny. So is there a tutorial that shows you the best way to make stuff look 3D? Thanks How can I make the <th> on the right hand side align everything inside it to the right? I already have a class which applies to all my <th> [html] <thead> <tr> <th scope="col" class="twentyfive">STATUS</th> <th scope="col" class="twentyfive">VIEW</th> <th scope="col" class="twentyfive">DOWNLOAD</th> <th scope="col" class="twentyfive">TOTAL</th> </tr> </thead>[/html] Do I need to add something like this? [css] table.main thead tr th.twentyfive { /*border: 1px solid #fff;*/ width: 25%; } table.main thead tr th.twentyfive.right { /*border: 1px solid #fff;*/ width: 25%; float: right; }[/css] Hi, I have attached 2 files code. I want the page to look like the second one.with both navigation boxes on the left on top of each other. But the 1st one I am trying to look the same with out putting the <divs> with in a <div> and it does not work, what am i doing technically wrong here? wrong one Code:
<html>
<head>
<STYLE type=text/css>
body
{ background-color: grey; font-size:14px; font-family:Verdana, Arial, Helvetica, sans-serif;
}
div#outer { width: 70%; height:75%; background-color:#FFFFFF; margin-top: 150px; margin-bottom: 30px; margin-left: auto; margin-right: auto; padding: 0px;
}
div#header { padding: 0px; margin-top: 0px; text-align: center; background-color:#659EC7; height:130;
}
div#nav { width: 30%; height: 200; padding: 0px; margin-top: 1px; float: left; background-color:#616D7E;
}
div#navt { margin-left: 0px; width: 30%; padding: 0px; margin-top: 210px; float: left; background-color:#616D7E;
}
div#main { margin-left: 40%; margin-top: 1px; padding: 0px; text-align: center; height:65%;
}
div#footer { padding: 0px; margin: 0px; text-align: center; height:62;
}
</STYLE>
</head>
<body>
<div id="outer">
<div id="header">
<h3>Bank</h3>
</div>
<div id="nav">
<h4>Navigation</h4>
<ul>
<li>Let me not to the marriage of true minds</li>
<li>Admit impediments; love is not love</li>
<li>Which alters when it alteration finds</li>
</ul>
</div>
<div id="navt">
<h4>Navigation1</h4>
<ul>
<li>Let me not to the marriage of true minds</li>
<li>Admit impediments; love is not love</li>
<li>Which alters when it alteration finds</li>
</ul>
</div>
<div id="main">
<p>Main Content -- Love's not time's fool...</p>
</div>
<div id="footer">
<p>Footer text -- Admit impediments...</p>
</div>
</div>
</body>
</html>
Right one Code:
<html>
<head>
<STYLE type=text/css>
body
{ background-color: grey; font-size:14px; font-family:Verdana, Arial, Helvetica, sans-serif;
}
div#outer { width: 70%; height:70%; background-color:#FFFFFF; margin-top: 150px; margin-bottom: 50px; margin-left: auto; margin-right: auto; padding: 0px;
}
div#header { padding: 0px; margin-top: 0px; text-align: center; background-color:#659EC7; height:130;
}
div#exp { width: 35%; padding: 0px; margin-top: 1px; float: left;
}
div#nav { width: 100%; height: 200; padding: 0px; margin-top: 1px; float: left; background-color:#616D7E;
}
div#navt { margin-left: 0px; width: 100%; padding: 0px; margin-top: 5px; float: left; background-color:#616D7E;
}
div#main { margin-left: 40%; margin-top: 1px; padding: 0px; text-align: center; height:65%;
}
div#footer { padding: 0px; margin: 0px; text-align: center; height:62; vertical-align:text-top;
}
</STYLE>
</head>
<body>
<div id="outer">
<div id="header">
<h3>Bank</h3>
</div>
<div id=exp>
<div id="nav">
<h4>Navigation</h4>
<ul>
<li>Let me not to the marriage of true minds</li>
<li>Admit impediments; love is not love</li>
<li>Which alters when it alteration finds</li>
</ul>
</div>
<div id="navt">
<h4>Navigation1</h4>
<ul>
<li>Let me not to the marriage of true minds</li>
<li>Admit impediments; love is not love</li>
<li>Which alters when it alteration finds</li>
</ul>
</div>
</div>
<div id="main">
<p>Main Content -- Love's not time's fool...</p>
</div>
<div id="footer">
<p>Footer text -- Admit impediments...</p>
</div>
</div>
</body>
</html>
I am VERY new at this, and I need all the help I can get. I am trying to make a table that looks like this: I am VERY new at this, and I need all the help I can get. I am trying to make a table that looks like this: http://i78. photobucket.com/albums/j108/l8org8or/HELP.jpg (take out the spaces before "photobucket") I need the table width to be 563, and I want everything to be centered. font size 14 and 9 Any help you can offer would be greatly appreciated. I need the table width to be 563, and I want everything to be centered. font size 14 and 9 Any help you can offer would be greatly appreciated. http://m2-klan.com/nuked.html How would I go about making this page all Css/div? My friend has been saying something that I can make that from all Css with less graphics, how would I go about doing that? I am a newbie at Css and I would like to know how to do that, instead of tables. Sometimes CSS makes me want to tear my hair out. I'm trying to make a custom form input that is a combination of a regular select drop down and a multiple select. I have the javascript all sorted out and my input works like a charm. I can't figure out any way to make it display like a <select> does though. I thought I could simply do this: <ul style="display: inline"> According to w3schools, this will tell the element to display without a line break before or afterward. Much to my despair, it's not that simple. Here's an example: Code: <div> This is some text <select name="test"> <option value="">Click to expand</option> <option value="1">One</option> <option value="2">Two</option> </select> <input type="submit" value="Submit" /> </div> <hr /> <div> This is some text <ul name="test" style="display: inline;"> <li>Click to expand</li> <ul style="display: none;"> <li value="1">One</li> <li value="2">Two</li> </ul> </ul> <input type="submit" value="Submit" /> </div> Notice how the regular old html input sits nicely inline with the text before it and the submit button after it? Notice how the ul doesn't, despite the fact it's set to display inline? Anybody have any suggestions? |
|||||||