|
CSS - Alignment On Pages--can't Get It To Work!
Hi, there. I have been working with the alignment for my site and every time I think I have it right, I look at it on a different size computer screen and everything is misaligned, I can't figure out what I'm doing wrong! I have a big .gif image as the background and a bunch of other images at the z-layer right above it so it gives the effect of a corkboard with sticky notes and things tacked onto it.
Usually it looks great but when I view it on my large computer screen, all the "items" tacked on the board are shifted over so that although they're aligned with each other the way I want them to be, they're spilling off the background cork image. Any ideas what I'm doing wrong and how I can get it all aligned relative to the cork board, and have that whole thing centered on whatever size screen it's being viewed on? I thought that's what I had accomplished with the CSS code I wrote, can anyone figure out the loophole here? Thanks! -lindsey [code] <style type="text/css"> #corkboard { align:center; z-index: 1; } #mission { z-index: 2; position:absolute; left:110px; top:25px; } #whenWhere { z-index: 2; position:absolute; left:445px; top:25px; z-index: 2; } #mailing { z-index: 2; position:absolute; left:770px; top:40px; } #postItMenu { z-index: 2; position:absolute; left:90px; top:350px; } #currentEvents { z-index: 2; position:absolute; left:440px; top:250px; } #highlights { z-index: 2; position:absolute; left:690px; top:225px; } #class { z-index: 2; position:absolute; left:440px; top:550px; } </style> <body bgcolor="8a8584"> <div id="wrapper"><center> <div id="corkboard"> <img src="images/corkboard.gif"> <div id="mission"> <a href="home.htm"><img src="images/UCUmainLogo.png" border="0"></a> </div> <!--mission--> <div id="whenWhere"> <img src="images/whenWhere.png" border="0"> </div> <!--whenWhere--> <div id="mailing"> <a href="mailto:lindsey@urbancraftuprising.com?subject=UCU newsletter"><img src="images/mailingList.gif" border="0"></a> </div> <!--mailing--> <div id="currentEvents"> <a href="vo.htm"><img src="images/currentEvents.png" border="0"></a> </div> <!--currentEvents"--> <div id="highlights"> <img src="images/perks.png" border="0"> </div> <!--highlights--> <map name="menu"> <area shape="rect" coords="36, 20, 176, 100" href="javascriptopUp('about.htm')"> <area shape="rect" coords="178, 15, 322, 92" href="javascriptopUp('media.htm')"> <area shape="rect" coords="73, 105, 180, 178" href="javascriptopUp('vl.htm')"> <area shape="rect" coords="194, 120, 350, 192" href="javascriptopUp('friends.htm')"> <area shape="rect" coords="57, 199, 177, 282" href="javascriptopUp('sponsors.htm')"> <area shape="rect" coords="188, 194, 320, 313" href="javascriptopUp('vo.htm')"> </map> <div id="postItMenu"> <img src="images/postItMenu.png" usemap="#menu" border="0"> </div> <!--menu--> <div id="class"> <img src="images/classInfo.png" border="0"> </div> <!--class--> </div><!--corkboard--> </body> Similar TutorialsI'm an amateur web designer, I only do pages for my band and for the gallery I work for. What happens is that on a Mac, people only get the background. www.formone.net is my band's site. www.kennedygallery.org is the gallery. www.kennedygallery.org/icefollies is a mini-site I made for an off-site event we did. I'm not sure whether it's IEmac or Safari or what that craps out, but the director of the gallery uses a mac and so I'd really like it if he could see our site. haha. I'm going mad with this, I tested the CSS a:hover function over FF 1.0.7 and IE6, and the style file is simple: PHP Code: h3 { margin:10px; color:#636500; font-family: Arial, Helvetica, sans-serif; font-style: normal; } p { margin:10px; color:#636500; font-family: Arial, Helvetica, sans-serif; font-style: normal; } a { text-decoration: none; } a:hover { color:#636500; } a:visited { color:#cecf9c; } a:link { color:#cecf9c; } searched through the forum but seems nobody has got this problem... I just want the link to change color, I imported the css file to my html and it worked for the first time. I clicked on the link and then use brower's "Back" button to test it again, but the hover feature is not working anymore. I think it may be affected by the a:visited style, but how do I make a:hover work all the time? Thanks for helping. Been trying to get these divs to align but with no success. Can someone be so kind to show me how to get the XHTML/CSS to look like the attachment below... PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html dir="ltr" lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" /> <title>Top Bar</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <style type="text/css"> <!--/*--><![CDATA[/*><!--*/ .bdr { width:100%; height:122px; background-color:#aaaaaa; text-align:center; border:#000000 3px double; } .lchief { float:left; width:69%; height:122px; background-color:#ffffff; text-align:center; } .rchief { float:right; width:382px; height:122px; display:block; position:relative; padding:0px 0px 0px 0px; background-color:#a0a0a0; } .stats { float:left; width:221px; height:102px; margin: 0px 0px 0px 20px; padding:10px; background-color:#e0e0e0; font:9pt verdana; line-height:12px; text-align:center; } .tmar { float:left; width:72px; height:19px; margin-top:10px; margin-right:2px; background-color:#bbbbbb; line-height:15px; } .tmar2 { float:left; width:72px; height:19px; margin-top:2px; margin-right:2px; background-color:#bbbbbb; line-height:15px; } .tnom { float:left; width:72px; height:19px; margin-top:10px; background-color:#bbbbbb; line-height:15px; } .tnom2 { float:left; width:72px; height:19px; margin-top:2px; background-color:#bbbbbb; line-height:15px; } .sidemenu { float:right; width:73px; height:102px; margin: 0px 20px 0px 0px; padding:10px; background-color:#c0c0c0; font:7pt verdana; text-align:center; } /*]]>*/--> </style> </head> <body> <div class="bdr"> <div class="lchief"> IMAGE </div> <div class="rchief"> <div class="stats"> <div class="tmar"> TBA </div> <div class="tmar"> TBA </div> <div class="tnom"> TBA </div> <div class="tmar2"> TBA </div> <div class="tmar2"> TBA </div> <div class="tnom2"> TBA </div> <div class="tmar2"> TBA </div> <div class="tmar2"> TBA </div> <div class="tnom2"> TBA </div> <div class="tmar2"> TBA </div> <div class="tmar2"> TBA </div> <div class="tnom2"> TBA </div> </div> <div class="sidemenu"> TBA<br /> TBA<br /> TBA<br /> TBA<br /> TBA<br /> TBA<br /> TBA<br /> </div> </div> </div> </body> </html> TIA, Taro Hi, I am trying to convert my table design to CSS and building the bare structure now but having some troubles with the alignment/layout. I want to move the left and right columns under the header div. but with float: left, they keep sticking to each other. here is the link: http://www.internationalnannies.com/test/ here is my CSS: Code:
/* Structure setup */
#header {
background-color: Aqua;
}
#body {
background-color: grey;
}
#leftColumn {
background-color: silver;
float: left;
width: 150px;
position: relative;
}
#rightColumn {
background-color: blue;
float: left;
width: auto;
position: relative;
}
#footer {
background-color: pink;
clear: both;
position: relative;
}
#photo {
background-color: grey;
margin-right: 5px;
float: left;
position: relative;
}
#headerRightContent {
background-color: red;
position: relative;
float: left;
}
/* *********************************** */
and here is my html: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>index</title>
<style type="text/css">
@import "styles.css";
</style>
</head>
<body>
<div id="header">
<div id="photo"><img src="images/noImage.gif" width="120" height="160" alt="noImage (1K)" /></div>
<div id="headerRightContent">right content</div>
</div>
<div id="body">
<div id="leftColumn">left</div>
<div id="rightColumn">right</div>
</div>
<div id="footer">footer</div>
</body>
</html>
Can someone do a quick review of this and comment? Thanks, Edwinx HI, I'm trying to get a line of text to lineup with a textbox using css. The code I have is as follows: Code:
.row {
height: 30px;
vertical-align: text-top;
}
.formField {
border: 1px solid #666;
width: 150px;
background: #FFFFFF;
color: #000000;
}
<body>
<div class="row">
xxxxx: <input type="text" class="formField">
</div>
</body>
The textbox is sitting just above the text. How can I get them lined up properly? I am working on a site that I have taken over development of and there is an alignment problem here any ideas on what the problem is or how to fix it? Thanks! Hello... Here is the site I'm having issues with ralphwall.com I'm noticing that it only happends in IE6 and not other browsers. It's shifting my float:right; column down the page. Here is the code in my css. Could anyone please help? I'm starting to pull my hair out. Thanks in advance. body{ cursor:url("assets/mouse.cur"); background-color:#20110A; overflow:hidden; font-family:Georgia, "Times New Roman", Times; font-size:14px; color:#FEF5E0; } a:link{ color:#FEF5E0; background-color:#7E5F33; } a:visited{ color: #FEF5E0; background-color: #7E5F33; } a:hover{ color: #7E5F33; background: #FEF5E0; } img{ border:0; } ul{ list-style-type:square; } #header{ float:left; width:90%; padding-left:5%; padding-right:2.5%; } #header h1{ font-family:Georgia, "Times New Roman", Times; font-size:36px; font-style:italic; color:#7E5F33; } #topnav{ float:right; width:95%; padding-right:2.5%; text-align:right; border-top: solid #7E5F33; } .hovermenu ul{ padding-left: 0; margin-left: 0; height: 16px; } .hovermenu ul li{ list-style: none; display: inline; } .hovermenu ul li a{ padding: 2px .5em; text-decoration: none; float: right; color: #FEF5E0; background-color: #7E5F33; border: 2px solid #7E5F33; } .hovermenu ul li a:hover{ background-color: #20110A; border-style: outset; } html>body .hovermenu ul li a:active{ /* Apply mousedown effect only to NON IE browsers */ border-style: inset; } #left{ float:left; width:20%; padding-left:5%; padding-right:2.5%; } #right{ float:right; width:60%; padding-left:5%; padding-right:2.5%; text-align:left; verticle-aling:top; } #right h1{ font-family:Georgia, "Times New Roman", Times; font-size:24px; font-style:italic; color:#7E5F33; } #footer{ float:right; width:95%; padding-right:2.5%; font-style:italic; text-align:right; } I have two columns (menu and content) and would like them to be horizontally aligned to the center sensitive to the size of the browser and relative to each other. I have figured out how to do this with the content column (right one) but I'm having trouble doing this with the menu column. I would like it to be equally space relative to the placement of the content column. Any help would be appreciated. Here's the code: Code: / { margin: 0; padding: 0; }
body { font-size: 12px; font-family: Helvetica Neue, Arial, Verdana, sans-serif; background: #F2F2F2; }
body.section-1 { }
body.section-2 { }
body.section-3 { }
a:link { text-decoration: none; } a:active { text-decoration: none; } a:visited { text-decoration: none; color: #666; } a:hover { background-color: black; color: #f2f2f2; } a img { border: none; }
#menu { width: 130px; overflow: hidden; top: 40px; position: fixed; height: 100%; background-color: #e6e6e6; text-align: left; margin: 0px 0px 0 0px 180px; left: 12%; }
#menu ul { list-style: none; margin: 0px; }
#menu ul li.section-title { }
#content { height: 150%; width: 700px; margin: 0 0 0 300px; top: 40px; position: relative; background-color: white; overflow: auto; padding: 15px; margin-left: auto; margin-right: auto; } .container { padding: 0px; }
#content p { width: 400px; margin-bottom: 15px; }
p { margin: 0 0 9px 0; } h1 { font-size: 32px; } h2 { font-size: 24px; } h3 { font-size: 16px; } h4 { font-size: 12px; }
#img-container { margin: 0; padding: 0; }
#img-container p { width: 400px; margin: 0; padding: 0 0 12px 0; } #once { clear: left; }
hey all... i have got a prob with a area in IE. It looks great when the users browseer is fullscreen and no favourites/history etc window is open. However once the window is resized or fav's are turned on then the content div drops to the bottom works fine in Moz FF but can't make it work in IE.. any ideas from anyone would be really great. thanks the link to the page is here and for the css click here thanks in advnaced ! RF I can't get the Sidebar and Content divs to line up with each other. I tried floating sidebar left and content right but that only made it worse. What am I missing? http://ror.twisted-delusions.net/template/brc.html http://ror.twisted-delusions.net/template/style2.css Actually, I just realized I was trying to float and position relatively. But when I removed the positioning and just used floats it would not stretch my container div, howcome? I added clear all but that didn't do anything. http://ror.twisted-delusions.net/template/brc2.html http://ror.twisted-delusions.net/template/style3.css -------------------------------------- OK, NVM, I needed a div below the floats to clear them >.< you can close this topic. Hi Guys, I'm having trouble with some alignment. I have a main div called 'left_sidebar' that has a few elements contained within it. At the top is a div that contains a user's profile pic, their name, and a link to edit their profile. Below that will be some navigation links, and some other items that will be dynamically populated depending on the page. The div that contains the photo, name, and profile edit link is giving me some trouble. Here's a pic of how it is currently Here's what I'm hoping to get. Below is the code I have. Nothing is being inherited that should affect how it's laid out or presented. Thoughts? I'm racking my brain and can't get this right. Also.. I need the border div to expand since the height of the image will not be set in stone. Code:
#left_sidebar
{
float: left;
margin: 0 0 .5em .5em;
width: 160px;
}
#left_sidebar_border
{
border: 1px solid #e87b02;
overflow: auto;
height: 100%;
margin: 0em 0em 1em 0em;
}
#left_sidebar_pic
{
margin: .5em .5em .5em .5em;
}
#left_sidebar_name_action_container
{
margin: 0em 0em 0em 0em;
}
#left_sidebar_name_action
{
}
#left_sidebar_name
{
}
<div id="left_sidebar">
<div id="left_sidebar_border">
<div id="left_sidebar_pic">
<a href="http://details.at/members/members.cfm?q=mpv1&url=jasonallenking">
<img style="float:left"src="http://details.at/imagehost/profiles/539/xs_IMAG0513.jpg">
</a>
</div>
<div id="left_sidebar_name_action_container">
<div id="left_sidebar_name">
<span class="mediumboldtext">
<a href="http://details.at/members/members.cfm?q=mpv1&url=jasonallenking">
Jason King
</a>
</span>
</div>
<div id="left_sidebar_name_action">
<span class="mediumtext">
<a href="http://details.at/members/members.cfm?q=pbi">edit profile</a>
</span>
</div>
</div>
</div>
</div>
Hi guys, I've been desperately trying to get this to work but realised I have to ask for help. www johnbradbury com This looks right in Internet Explorer 7, the header bar is at the top and stretched across the whole screen. In earlier versions this is pushed down etc.... Anyone point me in the right direction? Hi there, I want to make the text in my post content to align left and take the same width as the image (448px). I have changed the CSS of the post content, but all that happens is the posts get more un-aligned as you go down, as if the new 'left' alignment ruins the centering of everything. I'm using wordpress. Does anyone have any suggestions as to why this is happening, and how I can align my content text to the left? Thanks. haloo thar! i cant get my a div to align centered - heres the code - Code: <?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(URL address blocked: See forum rules)">
<html xmlns="(URL address blocked: See forum rules)">
<head>
<title>TRANSPARENT DESIGNS + V.2.0</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />
<style type="text/css">
body {background-image: url('back.jpg'); background-repeat: repeat-x; background-color: #AFA893;}
.body {text-align: center;}
.iframe {text-align: center;}
.white {width: 744px; height: 540px; background-color: #FFFFFF;}
</style>
</head>
<body>
<div class="body">
<object type="application/x-shockwave-flash" data="header.swf" width="744" height="228">
<param name="movie" value="header.swf" /></object>
<div class="white"><iframe class="iframe" id="news" src="news.html" width="700" height="500" frameborder="0"></iframe></div>
</div>
</body>
</html>
in ie its perfect but in firefox the div holding the iframe is aligned left??? help. anyone. please?! x Hi Guys, I'm trying to get a messaging app done and I need the CSS polished up. I understand CSS enough to hack my way through it, but for some reason I can't get the following done. Here's what I'm trying to create. This will be placed within an existing div that is 550px wide. I see 5 total divs that need to be created. The containing div, which is the thick border around the entire image. The profile pic div the name div the timestamp div the message div The containing div can't be height restricted. The profile pic div, name div, and timestamp div need to stay at the top. The message div will need to grow (height-wise) div.view_message_block { width: 550px; (or 100% since the containing div is already set to 550px?) margin: .5em .5em .5em .5em; display: inline; } div.view_message_profile_pic { width: 75px; display: inline; float: left; } div.view_message_sender_name { width: 80%; display: inline; float: left; } div.view_message_date { width: 20%; display: inline; } div.view_message_body { width: 80%; display: inline; } -------------------------------------------------------- Any help or guidance will be appreciated! Don't want it done for me, but I'm not sure where to go from here. Hello all! I am trying to create a simple website. I had it working in html alignment wise here URL But i want it working in CSS. Look here URL and tell me what it is i have done wrong. I want the two colums to sit next to each other, centered. Thanks for your time. Almost got my layout sorted, however i am having a really anoying alignment issue in Ie6, firefox works fine. The right-content div is off by 3px, i cant work out why. I am having to use two divs as opacity is inherited by child content in each div - i get round this by overlaying a 'content div' with absolute positioning. Page can be seen he www.monsterserve.net/new.htm and code is below: 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">
<style type="text/css">
*{
padding:0px;
margin:0px;
}
#container
{
position:relative;
width: 900px;
height: 500px;
margin-left: auto;
margin-right: auto;
margin-top: 10px; /* offset 10px from page top */
text-align:left;
border: 1px solid black;
/*background-image: url('car.jpg');
background-repeat: no-repeat;
background-position:bottom right;*/
}
#left
{
width:500px;
float: left;
border-right: 1px solid black;
height: 500px;
background-color: gray;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
}
#right
{
margin-left:600px;
width:200px;
height:500px;
border-right: 1px solid black;
border-left: 1px solid black;
background-color: gray;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
}
#left-content
{
position:absolute;
width: 500px;
left:0px;
top:0px;
}
#right-content
{
left: 603px;
\left: 602px;
l\eft: 603px;
position:absolute;
background-color:#0066CC;
position:absolute;
width:200px;
top:0px;
border: 1px solid black;
}
</style>
<title>Untitled Document</title>
</head>
<body>
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="left-content"></div>
<div id="right-content">right content</div>
</div>
</body>
</html>
Thanks in advance, PS> note that i have tried doing that \ thing for positioning (i saw someone doing that for width so i thought it may work for positioning too ) OK, I somehow became a css n00b overnight (I've made 4-5 websites heavily using css.) Basically, here is what I want: Code: style :: [ ] [ ] And here is what I'm getting: Code: style :: [ ] [ ] For some reason the boxes won't align with the text. No matter what I do! Here is the link to see: http://www.sential.co.uk/test.php Here is the html: Code:
<div id="style_selector">
<p>style ::
<a href="#" onclick="setActiveStyleSheet('SE001');
return false;" title="change to style: Underwater - Water Planet"><div id="style_se001">Blue</div></a>
<a href="#" onclick="setActiveStyleSheet('SE002');
return false;" title="change to style: Orkidea - Beautiful"><div id="style_se002">Orange</div></a>
</p>
</div>
And here is the css: Code:
#style_selector{
position: absolute;
top: 70px;
left: 160px;
height: 25px;
width: 100%;
text-align: left;
}
#style_se001{
float: left;
height: 15px;
width: 15px;
text-indent: 10000px;
overflow: hidden;
background-color: #6187E1;
display: block;
border: 1px solid #ffffff;
}
#style_se001:hover{
border: 1px solid #6187E1;
}
#style_se002{
float: left;
height: 15px;
width: 15px;
text-indent: 10000px;
overflow: hidden;
background-color: #FCB029;
display: block;
border: 1px solid #ffffff;
}
#style_se002:hover{
border: 1px solid #FCB029;
}
I'm sure it's something simple, yet I've tried switching positioning attributes and everything, and the code for aligning these boxes is IDENTICAL to the menu buttons at the top. I'm totally miffed -Luke how is it done? i use now absolute positioning in a relative block but if i understand this is taken out of the flow ? so if i use it for a link at the bottom and the user change his font size....things starts to overlap any ideas how this is not going to happen? |
|||||||