|
CSS - Css Div Help (newbie)
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 Similar TutorialsHello, 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 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 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 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 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 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? 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! 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! Ok, first and foremost I am a complete noob when it comes to CSS. I am currently attempting to build my FIRST website. After reading countless tutorials and guides, i decided to lay my site out in a combination of CSS + html as opposed to starting bad habits early and doing the layout in tables. Before I get to my two questions, let me give you the layout info followed by the questions , then I will provide the coding. Layout = 3 column , 6box ( 1 header,footer,content,left+right sidebar, and 1 horizontial Nav bar) , fixed layout using absolute positioning. Problem 1: Firefox renders the horizontial navigation bar incorrectly. It appears to have some kind of problem displaying an inline list. Everything appears fine in IE6. Problem 2: When trying to add bordrers to my boxes, they aren't displaying properly. Some are covered because my other boxes are covering them. I can however get around most of this by taking into account the 1px border for for the boxes and resizing them minus the total pixels needed for the borders. My main problem is the left and right borders, its like there is no margin for adding them because the container <DIV> that all my content is in will not expand with the total width of the content. I tried changing the width of the container , but that isn't working at all. Even with the width change it appears that my content is alligned to the left inside the container no matter what. Here is the HTML and CSS coding. The website in question is http://www.brandonsasylum.com Here is the HTML + CSS <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Brandon's Asylum | http://www.BrandonsAsylum.com |</title> <link href="mystyle.css" rel="stylesheet" type="text/css"> </head> <body background="img/wpbackground.gif"> <div id="container"> <div id="banner"> <div id="horznav"><ul id="navlist"> <li id="active"><a href="http://www.brandonsAsylum.com/index" id="current">Home</a></li> <li><a href="http://www.brandonsasylum.com/news">News</a></li> <li><a href="http://www.brandonsasylum.com/forum/index.php">Forums</a></li> <li><a href="http://www.brandonsasylum.com/gallery">Gallery</a></li> <li><a href="http://www.brandonsasylum.com/downloads">Downloads</a></li> <li><a href="http://www.brandonsasylum.com/links">Links</a></li> </ul> </div> <div id="leftsidebar"></div> <div id="rightsidebar"></div> <div id="maincontent"></div> <div id="footer"></div> </div> </div> </body> </html> and the CSS body { text-align: center; } #banner { background-image:url(img/Banner.jpg); position: absolute; top: 0px; width: 900px; height: 120px; } #horznav { background-color: #680000; position: absolute; left: 0; top: 120px; width: 900px; height: 20px; border-top: 1px solid black; border-bottom: 1px solid black; } #leftsidebar { background: #373737; position: absolute; top: 142px; width: 120px; height: 1500px; left: 0px; border-right: 1px solid black; } #rightsidebar { background: #373737; position: absolute; top: 142px; left: 780px; width: 120px; height: 1500px; } #maincontent { background: #373737; position: absolute; top: 142px; left: 121px; width: 658px; height: 1500px; border-right: 1px solid black; } #footer { background: #373737; position: absolute; top: 1642px; width: 900px; left: 0; height: 100px; border-top: 1px solid black; } #container { width: 900px; margin: 0 auto; text-align: left; height: 100%; top: 50px; } /*End of Layout Code*/ #horznav ul { padding-left: 0; margin-left: 0; background-color: #6800; color: White; float: left; width: 100%; font-family: arial, helvetica, sans-serif; } #horznav ul li { display: inline; } #horznav ul li a { padding: 0em 1em; background-color: #680000; color: White; text-decoration: none; float: left; border-right: 1px solid #fff; } #horznav ul li a:hover { background-color: #369; color: #fff; } Thanks for you help in advance. 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 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 I want to make a seperate component with style sheets associated with it so I can change the look in the future. My intended goal is something that will look like a two column table with the contents of each column being aligned to the right, and left, respectively so they nearly meet in the middle. Text: SelectDropDown Text: AnotherDropDown More Text: AnotherDropDown Kind of like that, where the colons should be matching up, and the drop downs should begin at the same place. What would the div/span structure look like? For example if I want the component to be 400 pixels wide, and the two columns meet at the center. 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; } hi there i am quite new to css and i would appreciate your help. i would like to make the following thing : my gallery contains 10 images (600/400 pixel) i would like to make one single page that shows only one photo at a time and has (text or icon) links to the other 9 images ... of course it would be nice to have some minimalistic transition effect between the images too but if its too much for you i am mainly interested in the functionality part if this (as so many things) has been made as a tutorial i will be glad to get a link too thanks zs 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! Hi all, I was hoping someone can help me with some trouble I've been having lately. If you could please take a look at http://webfyn.com What I'm trying to achieve is: 'div-top-left'(grey) to remain at the top left as it is. 'div-bottom-left'(purple) to be lined with the bottom of 'div-top-right' (pink), and move with the bottom of div-top-right as the text expands. All three divs must remain with in the wrapper (yellow). any help will be most appreciated. Code: <html>
<head>
<title>Positioning</title>
</head>
<body>
<style type="text/css">
body {
}
#div-wrapper {
margin-left:auto;
margin-right:auto;
background-color:#FF9;
position:relative;
height:800px;
width:800px;
}
#div-top-left {
background-color:#999;
position:absolute;
top:0px;
left:0px;
height:200px;
width:200px;
}
#div-bottom-left {
background-color:#C9F;
position:absolute;
bottom:0px;
left:0px;
height:200px;
width:200px;
}
#div-top-right {
background-color:#FCF;
position:absolute;
top:0px;
right:0px;
width:600px;
}
</style>
<div id="div-wrapper">
<div id="div-top-left"><h3>div-top-left</h3></div>
<div id="div-bottom-left"><h3>div-bottom-left</h3></div>
<div id="div-top-right"><h3>div-top-right</h3><br/>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</body></html>
Hi I'm looking for help with creating a couple of things for the updated web site that I plan to use for a "relaunch" soon. The site is based on phpBB3 and Coppermine Gallery 1.5. I want both halves of the site (the pictures in the gallery and the written info in the Forum) which have two different ways to go about "styling", to end up looking the same. Although I'm not at all skilled, and much of what I do is trial and error, I'm making good progress with the editing of the PHPBB3 theme, but I'm having problems with the Copppermine Gallery theme. I've tried getting help from the Coppermine forum, but it is a little "abrupt" and not the friendliest of environments, so I was hoping that this might be a little more "newbiwe friendly" If there is anyone prepared to help out a willing learner on a couple of issues that I have, then I'd be very grateful. I'd be pleased if anyone willing would make themselves known. Thanks in advance. Martin 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! |
|||||||