|
CSS - Newbie Positioning Question - Right Align Sidebar
Hello and thanks for your patience.
I have a page here that is having a positioning problem for "sidebar2". I can't seem to get it to stick to that right side of the page in a fixed position. Code: @charset "UTF-8";
* {
margin: 0px;
padding: 0px;
}
body {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
color: #32240C;
line-height: 1.5em;
}
a:link {
color:#C42617;
}
a:hover {
color: #687ABB;
}
a:visited {
color:#C42617;
}
a:active {
color: #687ABB;
}
h2 {
font-size: 1.2em;
line-height: 2.3em;
color: #34260b;
border-left-width: thin;
border-left-style: double;
border-left-color: #34260b;
text-indent: 10px;
background-repeat: no-repeat;
}
#clear {
clear: both;
}
#welcome {
color: #325084;
float: left;
width: 590px;
text-align: left;
padding: 15px;
border: thin solid #D0DAEF;
background-color: #FFF;
margin-left: 25px;
margin-right: 5px;
}
#welcome h2 {
padding-left: 2px;
}
#welcome p {
padding-left: 2px;
}
input {
width: 185px;
}
/* reset width for non-text inputs */
input.radio, input.checkbox, input.submit, input.dropdown {
width:auto;
}
/* display labels next to form elements add a class for when you want them to stack */
label {
float: left;
margin-right: 1em;
}
label.top {
display: block;
float: none;
}
.sidebar2 {
position:absolute;
top:182px;
right: 150px;
text-align:left;
width: 255px;
padding-top: 0px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 10px;
margin-top: 0px;
}
.sidebarheader {
color:#D75500;
padding-bottom: 5px;
font-weight: bold;
font-style: italic;
font-size: 16px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
img {
border: none;
}
/*- Menu 3--------------------------- */
#menu3 {
width: 250px;
border-style: solid solid none solid;
border-color: #BCD2E6;
border-size: 1px;
border-width: 1px;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 0px;
font-size: 12px;
}
#menu3 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu3 li a:link, #menu3 li a:visited {
color: #325084;
display: block;
background: url(menu3.gif);
padding: 8px 0 0 10px;
}
#menu3 li a:hover {
color: #627EB7;
background: url(menu3.gif) 0 -32px;
padding: 8px 0 0 10px;
}
#affiliates {
color: #325084;
float: left;
width: 580px;
text-align: left;
margin-left: 25px;
margin-right: 15px;
}
#affiliates table td {
padding: 15px;
}
Can you tell me how format that div? Similar Tutorialshi all. i am trying to leave the world of table formatting and need a bit of help i have a container div with two divs in it the first div has an image in it that should sit at the bottom, like so: _____________________ logo div ____IMG______________| __nav div_____________| i have the following code as my css: #container{ margin-left:60px; border:1px dotted black; } #logo{ margin-top:60px; width: 395px; height: 140px; background-color:#EBEBEB; padding: 10px 0px 0px 20px; } #nav{ margin-top:5px; height: 25px; width: 395px; background-color:#FFFF00; padding: 10px 0px 0px 20px; } img { display: block; border: 0; } img.bt { display: block; vertical-align: bottom; } and my html: <div id="container"> <div id="logo"><img src="i/logotype.gif" class="bt"></div> <div id="nav">Practice Areas | Firm Profile | News | Attorneys</div> </div> it is not vertical aligning to bottom. can anyone help me? i am testing on mac ie5 and safari for super @ssyness!! but i want it to work everywhere if possible. i am sure it is something simple, but im not sure what it is thanks a lot everyone. Greetings! This is my first time with using css and I'm going out of my mind trying to fix a floating sidebar. As you can see from the included jpeg, I want the sidebar and main content areas to float flush with the navigation bar. But for some reason, my right sidebar keeps getting pushed down. Any thoughts would be appreciated. Thanks! Devon picture of what it should look like:themorphememan.com/personalstuff/website-design.jpg code:themorphememan.com/personalstuff/index.html Edited I would like to have a sidebar that vertically stretches to the height of its wrapper div. The sidebar contains two divs (a menu and a graphic) one of which is aligned to the top of the sidebar and one of which is aligned to the bottom. Thus when the sidebar stretches vertically, the space in between the menu and the graphic stretches. I currently have a floated sidebar with a fixed width and relative postion. That sidebar is in a wrapper div that is also relatively positioned. There is a menu and a graphic (#mascot) inside of the sidebar. My current CSS only allows the sidebar to be vertically as big as the two items in it. Here is my CSS: Code:
#wrapper {
padding:0px;
margin:5px auto 10px auto;
border:solid 1px white;
border-collapse:collapse;
width: 800px;
height:100%;
position:relative;
}
#sidebar {
margin:0px;
padding:0px;
width:220px;
float:left;
background:url(_images/team/bg_nav.jpg);
position:relative;
}
#sidebar #menu {
margin:0px;
padding:0px;
border:solid 1px #000;
}
#sidebar #mascot {
margin:0px auto;
padding:10px;
text-align:left;
background:url(_images/team/bg_mascot.jpg);
font-size:10px;
font-weight:normal;
font-family:Arial, Helvetica, sans-serif;
color:#000;
text-align:center;
border:solid 1px #000;
}
#mainContent {
margin:0 2px 0 222px;
background:#FFF;
padding: 10px;
}
#footer {
margin:0px;
padding:0px;
width:100%;
background:url(_images/team/bg_footer.jpg);
font-size:10px;
font-weight:normal;
color:#FFF;
text-align:center;
}
I would really appreciate any help as I am relatively new to CSS. If the code is confusing I'd be happy to expound on anything. Thans in advance, Brian Hi, I have made myself some ugly css code (just got started so this is my first try) that gives me a floating sidebar on my right side. This sort of works for IE6 (that most of my friends use) and I don't even dare to think about the look of it in another browser... So I would greatly appreciate some advice regarding improvements of the following code... Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
<!--
@media screen {
html {overflow:hidden;}
body {height:100%; overflow:auto; margin:0; padding:0; color: white;
background-color: #333;}
#container {position:fixed; margin-top:30px; margin-right:auto;
margin-bottom:30px; margin-left:auto; width: 1000px;
padding:10px; background-color: black; border: 1px solid
white;}
#header {position:fixed; margin-top: 0px; margin-right: 99px;
margin-bottom: 10px; margin-left: 99px; height:60px;
padding:0px; background-color:red; border: 1px solid white;}
#sidebar {position:relative; width:178px; height:150px; left:10px;
top:0px; padding:5px; background-color:blue; border: 1px
solid white;}
#intro {float:left; margin-top: 0px; margin-right: 0px; margin-bottom:
0px; margin-left: 0px; height:150px; width:788px; padding:5px;
background-color:green; border: 1px solid white;}
#content {margin-top: 10px; margin-right: 200px; margin-bottom: 10px;
margin-left: 0px; padding:5px; background-color:green; border:
1px solid white;}
#navbar {margin-top: 0px; margin-right: 99px; margin-bottom: 0px;
margin-left: 99px; height:75px; padding:0px; background-color:
red; border: 1px solid white;}
}
//-->
</style>
</head>
<body>
<div id="container">
<div id="header">A NICE HEADER</div>
<div id="intro">A USEFUL AREA FOR SECTION INTRODUCTION </div>
<div id="sidebar">TEST1<br>TEST2<br>TEST3</div>
<div id="content"><b>lot's of nasty things...</b>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
</div>
<div id="navbar">MY GLORIOUS NAVIGATION BAR</div>
</div>
</body>
regards /twinkle 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 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>
I have a div with this ID: #sml_image_container { margin: 2px; padding: 2px; height: 70px; width: 70px; border: 1px dashed #333333; font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #FFFFFF; font-weight: bold; vertical-align: middle; } I'd like to have a div work like a cell in a table that is 70px by 70px - with the text centered both horiz. and vert.. But I can't get it. Is the above the correct use of the "vertical-align"? I need the CSS equivilent to <td align="center" valign="middle"> in a DIV. 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 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 have one link on a web page that I want the default colors to appear on. How do I turn off A:link, A:visited, A:active, & A:hover styles for one single link? I want all the other links to remain as they are presently set with CSS. Also, I want the font attribute(s) to remain set for the link in question. Thanks, Thad I keep seeing the same things online "Make the body container 100%" Tried that and it still isn't working. Site is http://www.columbusindiearts.com/indexfull.html and here is the code Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
body
{
background-color: #999999;
height:100%;
width:100%;
}
div#outer
{
background-color: #FFFFFF;
display: table;
width:600px;
height:100%;
margin-left:auto;
margin-right:auto;
}
</style>
</head>
<body>
<div id="outer">
test
</div>
</body>
</html>
What am I doing wrong? need it to work in IE7 and Firefox. Hosted on linux Apache Could someone take a look at http://nexleads.com/projdemos/fc/test.html and tell me why it;s fine in IE and not in firefox ?? I undertsand that firefox is right and IE isn't, but could you point me to the right direction ? Thanks !! Hey everyone! I'm brand spankin' new to the forum, but hopefully I'll become a regular fixture here! I have a real estate agent client that I am doing SEO for, but my duties have expanded (a little outside my expertise) into the website itself. I can't post hyperlinks (which precludes me pasting code here) so this should be an interesting task of explaining my problem! Currently, there is a vertical navigation bar on the left side of the page that is simply an < ul > of hyperlinks. So, for example, if the list item was "Brooklyn", it would return a search of the MLS listings for the city of Brooklyn. The client wants these hyperlinks to instead go to pop-out menus. So, the tab would still say "Brooklyn", but there would be two popout items "Brooklyn Brownstones" and "Brooklyn Apartments" for example. The original tab would no longer hyperlink to search results, but the pop outs would link to results for their specific parameters. The current template is using <ul class="navSec"> to accomplish the nav bar. I cannot write code (aside from HTML) from scratch. I can, however tweak and edit existing code in .css, .php, .js etc. If there is any way you can help me, I'd appreciate it. Since I can't link the site, I can tell you it is Maui Just Listed (all one word) with the dot and then the com. Eileen As the title says, I just started learning HTML/CSS, cause our robotics group need to have a website, and all that. Sooo....first, I did a basic (photoshop) outline of how it should look like, and all. -since I can't post picture links for some reason, I'm not sure how can I explain this...- And so, I tried my hands on CSS, and all. And well...I succeeded, and failed...ish. Basically, I tried to make the menu. While it looked fine and all, I think I mis assigned my CSS styling, so whatever I type in the <html> is now considered part of it. I tried to id the links out, but I don't think I did it correctly, or that's the wrong way to do it. >__> . To be specific, I want to place some text around, but they start at midway down for no reason, and the same goes for images with hyperlink. So I'm assuming it's still thinking whatever I'm typing is still considered part of the "menu". So is there a way to well, isolate the menu out, or something? Code:
</body>
</html>
<html>
<head>
<style type="text/css">
a:link,a:visited
{
display:block;
font-weight:500;
font-family:Arial;
letter-spacing: 1px;
color:#FFFFFF;
background-color:#3366cc;
width:145px;
text-align:center;
padding:6px;
text-decoration:none;
position:relative;
left:8px;
bottom:-83px;
}
a:hover,a:active
{
background-color:#99ccff;
}
</style>
</head>
<head>
<style type="text/css">
body
{
background-image:url('http://img220.imageshack.us/img220/3707/backgroundtesteq.jpg');
background-repeat:no-repeat;
}
</style>
</head>
<html>
<a href="http://facebook.com" target="_blank">ABOUT US</a>
<a href="http://google.com" target="_blank">JOINING US</a>
<a href="http://youtube.com" target="_blank">THE FRC</a>
<a href="http://tvtropes.org" target="_blank">OUR ROBOT</a>
<a href="http://fanfiction.net" target="_blank">2011</a>
<a href="http://thegame.youlostit.com" target="_blank">EVENTS</a>
<a href="http://ihotrobotics.org" target="_blank">PREVIOUS YEARS</a>
<a href="http://aischool.org" target="_blank">COMMUNITY</a>
<a href="http://questionmark.com" target="_blank">SPONSORS</a>
</html>
So uh, can anyone help tell me what's the problem? =x Thank you very much. hey all, ive got a newbie question here, just got a book and am trying some things but can figure out this.. i have the following Code:
ul, li {
display: inline;
margin: 10;
padding: 15;
font-weight: bold;
font-style: italic;
}
<ul>
<li><span align="center" class="normal">Image 1</span></li>
<li><span align="center" class="normal">Image 2</span></li>
<li><span align="center" class="normal">Image 3</span></li>
<li><span align="center" class="normal">Image 4 </span></li>
<li><span align="center" class="normal">Image 5</span></li>
</ul>
and the prints age 1 Image 2 Image 3 Image 4 Image 5 which is good but ide like to have the following age 1 Image 2 Image 3 Image 4 Image 5 age 1 Image 2 Image 3 Image 4 Image 5 i have tried this Code:
<ul>
<li><span align="center" class="normal">Image 1</span></li>
<li><span align="center" class="normal">Image 2</span></li>
<li><span align="center" class="normal">Image 3</span></li>
<li><span align="center" class="normal">Image 4 </span></li>
<li><span align="center" class="normal">Image 5</span></li>
</ul><br>
<ul>
<li><span align="center" class="normal">Image 1a</span></li>
<li><span align="center" class="normal">Image 2a</span></li>
<li><span align="center" class="normal">Image 3a</span></li>
<li><span align="center" class="normal">Image 4a </span></li>
<li><span align="center" class="normal">Image 5a</span></li>
</ul>
but it isn't quite right, basically i want to implement a 2 row 5 colum table using this method...is there another way of doing it?? thanks in advance RF Hi guys, I'm new to CSS so pleaz forgive me if the following questions are stupid. 1/ Let's say we have in traditional HTML this: <img src=".."><font class=""><b>French Jokes</b></font> <br> <img src=".."><font class=""><b>French (Freedom) Fries</b></font> <br> <img src=".."><font class=""><b>F*** Jacques Chirac</b></font> <br> <img src=".."><font class=""><b>A bas la France</b></font> Now how should I write that in plain CSS? (I know I cannot use <b>, nor <font> tags). I suppose the <p> tag, correct? Something like: <img src=".."><p id="cat_title">French Jokes</p> <br> <img src=".."><p id="cat_title">French (Freedom) Fries</p> <br> <img src=".."><p id="cat_title">F*** Jacques Chirac</p> <br> <img src=".."><p id="cat_title">A bas la France</p> My problem with CSS is not the table design with float and so on but rather how to lay out a page combining many fonts (some on the same line), some <b> and some <u>'s, some font tags etc. (should I choose <span> rather than <p>?, <div>, rather than <p>, <b> or <strong>, etc, etc ,etc) Thank you for your help. Cheers Andreas Hi, First, before you get on my case, I'm using a table, because that's what the teacher wanted. And as I've never worked with CSS, let alone divs, I was more comfortable with it anyhow. Okay, the question I have is probably very dumb, and the answer very simple, but I'm not getting it. I'm just trying to get an image aligned to the top of a cell. http://esdcar.org/web/test/templatem2.html I could use valign in the cell tag, and it almost works (but it doesn't quite align at the top, about 5px short), but I'd like to do it with CSS, especially as I'm going to have a different header image on every page. The cell has its own id of contentm. Inside the img src tag, I put class="pageheader." In the stylesheet, I gave .pageheader an attribute of vertical-align: top. But, it's not working. What am I doing wrong? |
|||||||