|
CSS - Css Newbie - I Know How To Do This With A Table, But Not With Css
This is a very simple table for my top navigation bar, 3 columns, 1 row, but I can't get it to work right with css.
<table width=100%> <tr> <td width=100><img src=logo.gif></td> <td width=100% valign=middle align=right>long list of links that I want to wrap based on browser width</td> <td width=100 valign=middle align=right>login/user links</td> </tr> </table> This is pretty much exactly like the gmail top navigation, with an image on the left. Thanks! Similar TutorialsHi everyone- I'm a rank beginner at CSS and am trying to figure out the whole positioning thing -- you know, the stuff that was generally a no-brainer using tables back in the day. :-) For learning purposes, I'm trying to do this with only CSS and no tables. So, here's my problem. I'm creating a simple two-row layout. The first row contains two columns, and the second/bottom row contains only one. I'm trying to make sure the bottom row always remains below the longest of the two columns in the row above it. With the code below, I can cut text from the left column and the bottom row maintains position. If I cut from the right, however, the bottom row moves up and is partially hidden under the left column. I've tried using both absolute and relative positioning for the bottomRow DIV, but no luck. I'm sure this is probably something simple that I'm just not getting. Any thoughts? Thanks in advance... - Tom Tedeschi Code:
<style type="text/css" title="theStyle" media="screen">
/* <![CDATA[ */
#leftCol {
background: #c0c0c0;
position: absolute;
top: 1px;
width: 250px;
height: auto;
border-top-style: solid;
border-top-width: 1px;
border-right-style: solid;
border-right-width: 1px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-style: solid;
border-left-width: 1px;
}
#centerCol {
background: #f7f7f7;
position: relative;
top: 1px;
left: 250px;
width: 250px;
height: auto;
border-top-style: solid;
border-top-width: 1px;
border-right-style: solid;
border-right-width: 1px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-style: solid;
border-left-width: 1px;
}
#bottomRow {
background: #929292;
height: auto;
border-top-style: solid;
border-top-width: 1px;
border-right-style: solid;
border-right-width: 1px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-style: solid;
border-left-width: 1px;
}
/* ]]> */
</style>
</head>
<body leftmargin="0" topmargin="0" marginheight="0" marginwidth="0">
<div id="bigBox">
<div id="topRow">
<div id="leftCol">
<b>TopRow/LEFTCOL here </b>Si quid est in me ingeni, judices, quod sentio quam sit exiguum, aut si qua exercitatio dicendi, in qua me non infitior mediocriter esse versatum, aut si hujusce rei ratio aliqua ab optimarum artium studiis ac disciplina profecta, a qua ego nullum confiteor aetatis meae tempus abhorruisse, earum rerum omnium vel in primis hic A.
</div>
<div id="centerCol">
<b>TopRow/CENTERCOL here </b>Si quid est in me ingeni, judices, quod sentio quam sit exiguum, aut si qua exercitatio dicendi, in qua me non infitior mediocriter esse versatum, aut si hujusce rei ratio aliqua ab optimarum artium studiis ac disciplina profecta, a qua ego nullum confiteor aetatis meae tempus abhorruisse, earum rerum omnium vel in primis hic A.
</div>
</div>
<div id="bottomRow">
<b>BottomRow here </b>Si quid est in me ingeni, judices, quod sentio quam sit exiguum, aut si qua exercitatio dicendi, in qua me non infitior mediocriter esse versatum, aut si hujusce rei ratio aliqua ab optimarum artium studiis ac disciplina profecta, a qua ego nullum confiteor aetatis meae tempus abhorruisse, earum rerum omnium vel in primis hic A.
</div>
</div>
</body>
</html>
If someone could look at my page and tell me why I can't get the danged table to move up, I would really appreciate it!! http://www.defuniaksprings.com/fairgrounds/sponsors.htm You have NO idea how new I am to all of this... Thanks... Rob (Sneaux) So I'm taking the jump from Tables to Div layouts for non-record elements like I'm "supposed" to. Just for starters, I'm finding it much more complicated than tables would have ever been, and there are a number of cross-browser problems that would have never happened, but I won't get into a rant about it here. So, instead, a simple question. I have some nested Divs I'm setting up like I would a nested table. But I'm finding that some DIVs are actually "poking out" of the original DIV. I didn't even know this was possible w/o some sort of positioning. Can anyone tell me what I'm doing wrong he http://www.poweredpages.com/cityrecovery/index.php I'm trying to keep that red bar inside the top DIV, which contains a gray background (and a red border to help you see where the outermost DIV lies). Thanks, Jeremy Hello, i am creating a website in dreamweaver and have created a custom css navigation bar online. can anyone help me get the navigation bar on to my dreamweaver website? i have the css files and everything for the navigation bar i just can't work out how to insert it into my design. please help as i have a deadline looming :/ thanks for your time sam marriott I'm a design student trying to make an online portfolio and honestly I don't know much about CSS and I've hit a bit of a snag. I've been goofing around in Dreamweaver trying to get the CSS containers to do what I want but I just can't seem to get it. URL Basically, I'd like a two columns both aligned at the bottom of the browser. The right column would be centered and the left column would be aligned to the left of it. The left column would be a menu column and would be fixed and shouldn't scroll. Here's the CSS code: Please don't laugh Code: .container { height: 80%; width: 700px; margin-left: auto; margin-right: auto; background-color:#06F; padding: 10px; position: relative; overflow: visible; bottom: 0pc; } .menu { height: 80%; width: 300px; padding-top: 25px; padding-right: 25px; position: fixed; left: auto; bottom: 0px; background-color: #F00; }
Sorry for being such a newbie, the code is nothing like what I wanted. If someone could please lend me a hand, I would gladly appreciate it HELP !! The header to my website is designed in css with <div> tags and some times the whole background does not load....any thoughts? Also I am considering the possibility that my header should not call to my stlye.css file, but that the header should be a table with the table having it own style...any thoughts on this would be really appreciated thank you sean (URL address blocked: See forum rules) is my site Hey folks, I have a question. I'm trying to get a site 100% CSS compliant through W3C. But I'm facing a few problems. Of course I had the site looking just the way I like it (but then had to change stuff to make it compliant and thats when the fun begins!). I was wondering if you could have a look and see why this panel isn't floating to the right like I have told it to! three60design.com/sky_site/home.htm This is my first full CSS website and want it to be just perfect for going for jobs and would REALLY REALLY appreciate any help..... Gerry Hi, I want to display some products on a web page. Anyone know how I can display the products (image & text) in a nice looking box? Thanks CF I have a b2 evolution blog that I'd like to alter a bit. I'd like to be able to widen the area where the content is displayed so there isn't so much wasted space on each side. How would I go about doing this? If you need to see the site: http://www.foreverpurple.com/blog/crab_blog.php Hey, i created this page using tables www.epcgaming.com/rev and obviously its very messy code, and doesnt load well. I had suggestions that i should do it in css, i read some tutorials, but i still do not see how i can make that layout using css and not tables, you guys got any tips to get me off inthe right direction? Hello all... it's been brought to my attention that css is a solid method to build sites. my question is this; would css work well for a website that displays a variety of products stored in a database and brought up via php. the page length would vary depending on the number of products per section etc... also, i typically generate my pages in photoshop/image ready (being a designer ahead of a developer)...are sliced images easily useable in css? Thanks in advance! I need to build web page like this. Is it possible to make it with divs. I believe it is, but I can't manage how. Can you please help me with my little problem? Thanks in advance! i am new to css and want to use a background image for my navigation/link lists.... i have been working on this ALL DAY and have changed so much of the code i really have screwed everything up... i want the RESOURCE title to move up more toward the top of the graphic.... and my lists are totally messed up -- i want them all to be UL not OL... and none of the link attributes are working at all... please check my code and tell me what is WRONG- i am sure there are alot of mistakes... I had things perfect in the ARTWORK part of the code and then worked on the RESCOURCES and somehow EVERYTHING got majorly messed up-- i am now totally confused and am about to tear my hair out .....or worse i am desperate!!!! thanks so much for any help that can be provided....i really appreciate it graphic here is the entire code-- #linkList { background-color: transparent; background-image: url(IMAGES/navbar2a.jpg); height: 364px; width: 185px; background-repeat: no-repeat; position: absolute; margin: 100px; top: 100px; } #linkList h3 { THIS IS "ARTWORK" font-family: verdana, sans-serif; font-size: 12px; font-weight: bold; height: 10px; margin-top: 20px; margin-right: 20px; margin-left: 20px; padding-left: 30px; padding-right: 30px; padding-top: 1px; width: 151px; color: yellow; } #lresources { THIS IS "RESOURCES" font-family: verdana, sans-serif; font-size: 12px; font-weight: bold; color: yellow; margin-left: 20px; padding-bottom: 10px; padding-left: 29px; padding-right: 29px; padding-top: 10px; #linkList li { background-color: transparent; display: block; color: yellow; line-height: 3em; margin-left: 5px; padding-bottom: 2px; padding-left: 50px; padding-right: 50px; padding-top: 1px; } #linkList2 { font-family: verdana, sans-serif; font-weight: bold; font-size: 10px; color: lime; margin-bottom: 48px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding: 0px; } NONE OF THESE ARE WORKING #linkList li a:link { background-color: transparent; color: lime; list-style-type: none; } #linkList li a:visited { background-color: transparent; color: white; } #linkList LI A:hover, #linkList A:active { background-color: fuchsia; color: yellow; } Hello, I'm a novice at CSS, but have managed to do use a CSS template to create a website which works for our company. However, I want to change the .jpg banner up top to a .swf flash file. When I go into the styles2.css file and change the file it's referencing to the flash file, the area just shows up blank. I know the .swf is in the right place. Is there a reason that this CSS file won't allow me to reference a .swf file? Do I need to change something besides the URL it references? For clarification... The css reads now... Code: #header {
background-image: url(images/head3.jpg);
background-repeat: no-repeat;
width: 760px;
height: 148px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 11px;
padding-top: 1px;
padding-right: 1px;
padding-bottom: 1px;
padding-left: 0px;
background-image: url(images/head3.jpg);
I change it too Code: #header {
background-image: url(images/head3.swf);
background-repeat: no-repeat;
width: 760px;
height: 148px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 11px;
padding-top: 1px;
padding-right: 1px;
padding-bottom: 1px;
padding-left: 0px;
background-image: url(images/head3.swf);
Any ideas? (the swf file is in the images folder, and named head3.swf) THANKS! PS, the website URL is aesrenew dot com Hello, I'm new to the world of CSS. Hopefully that won't be TOO obvious to anyone looking at my code... Anyway, it hasn't taken long for me to find frustrations with IE. I'm having issues with elements on two pages of the site I'm working on: the index page (wiayouthmountainland.org ) and the apply page (wiayouthmountainland.org/apply.php ) On the index page there is some white text in the center of the page. It is where it should be in FF but is way over to the right in IE. On the apply page there are some textboxes on the right side of the page. Again, the placement is correct in FF, but they are too low in IE. I don't know if the same thing is causing the problems. I don't really know what it is I'm looking for. If someone wouldn't mind taking a look to see if they can figure out what is messing me up, I'd really appreciate it! Here is a link to the css: wiayouthmountainland.org/WIA.css . Thanks in advance! Jules Hi! I am trying to figure out what the issue is with a website I'm helping a friend on. Aveasalons.com is using CSS for the navigation and for some reason the buttons are switching around (not laying as intended) when viewed in Windows. The site was created on a Mac and views fine that way. Any suggestions?? Your assistance is greatly appreciated! Edited |
|||||||