|
CSS - Beginner To Css - Alignment
So here is my current code:
Code: body {
color: gold;
background-color: black;
}
#main {
align: center;
}
#header {
width: 600px;
height: 150px;
border: 1px solid;
background-image: url('http://localhost/web/css/images/header.jpg');
}
#links {
width: 600px;
}
#links ul {
vertical-align: center;
}
#links ul li {
padding-left: 10%;
display: inline;
}
#content {
border: 1px solid;
text-align: center;
width: 600px;
}
As the title said, I am a complete beginner to CSS, so any criticism on my code is always welcome. The HTML to go along with this: Code: <html> <head> <title>Test Corp Site</title> <link rel="stylesheet" type="text/css" href="corp.css" /> </head> <body> <div align="center"> <div id="header"></div> <div id="links"> <ul> <li>Home</li> <li>Link 2</li> <li>Link 3</li> <li>Link 4</li> </ul> <div id="content"> <h1>Testing</h1> <p>This is just a test to see if I can actually design the corp website!</p> </div> </div> </body> </html> Screenshot That's essentially what it creates. My question is this: If you look at where the supposable links are supposed to go, you'll see that they are slightly crooked, more off to the right. Well I want them to be exactly centered. As you can see the div layer is defined as being only 600px wide, so I want the links to be centered inside that 600px box and retain their padding at the same time. I have tried using things like vertical-align but I can't seem to get it to center correctly. What am I doing wrong? Similar TutorialsI'm an HTML+CSS beginner and I'm creating a website from a template. The style sheet of the website defines stuff like headers as suited to the general look and feel off the website. Good. But the website allows me to post articles and the articles (which are written with an HTML editor so they use standard HTML elements) pick up those styles and they look terrible. I think the easiest solution is for me to create some new styles in my CSS specifically for articles. Then, when I post a new article, I would add something to the article's HTML instructing it to use those new article styles instead of the general styles. So, I tried adding this to my CSS file: #article h1 { color:#ffffff; } And I surrounded the HTML of my article with this: <div class="article"> ....the article's HTML </div> But this didn't have any effect on how the <h1> within the article is displayed. What am I doing wrong? Hi, beginner question. How do I achive this Code: <TABLE BORDER="1" CELLPADDING="5"> in my CSS? Thank you for your help? Hello, I just started trying to learn about css and html layouts by following this tutorial he hxxp://www . subcide.com/tutorials/csslayout/page2.aspx This is my webpage: (link removed as issued is resolved) but I'm having issues making the navigation look correct (not repeat and be about 50 px down) Can someone give me a little hand. ? cheers. ps....errrr...I see nothing that I am doing wrong in the forum rules about the urls...... Hello all, this is my first post! I hope I will be able to learn and contribute. first off, im a programmer, and I want to start making web sites! My websites will be simple, so what I am looking for is: ***important note: I am only looking for a simple 3 column + header + footer layout. The most versatile layout - whether it is pure css, or minimal tables - the layout that will work with the maximum possible amount browsers new and old, the most or at least most popular resolutions, whether it is liquid or fixed. A resource or means by which I can test layouts on the available platforms, e.g, IE, mozzila, opera, mac etc. - is there a site you can submit your code to and do this? Thankyou very much for your time, TheLove - youll get some of it! Well, I've started diving into CSS and I'm pretty intimidated by it. A lot of it seems to go counter the intuition that I could rely on as long as I worked with tables in a WYSIWYG editor, lol... I'm trying to do something with CSS that looks darn simple, but I just can't get it to work! I can't post hyperlinks, it seems. So you'll have to paste this URL of an explanatory picture into the address line yourself img262.imageshack.us/img262/1278/layoutro9.jpg Basically what I need is a two-column design: - column on the left is fixed-width and contains some seperate containers lined up vertically; these should resize (vertically) when content requires - column on the right is supposed to be the widest and also contains seperate containers lined up vertically; initially, the middle one of them is a picture that is resized to fit the browser window. Now it comes: I use javascript to expand the image to full-size when the user clicks it. What I want is that the column on the left is completely unaffected by this, that the picture expands to the RIGHT (going beyond browser window and can be viewed entirely by scrolling with the scrollbars), and that the container below the picture moves down with it and doesn't move below the left column. I've been trying a couple of things but always end up with issues, most probably because I haven't given it enough time. But I'm getting frustrated quickly because this looks SO simple!! Just to be clear: all I need is a CSS layout that arranges the 7 or 8 "boxes" correctly for this purpose. I would be very thankful if someone could show some working code. JoH I've been working in CSS, man, is it tiresome for a beginner! After much trail and error, I've come up with my first CSS page. Where I'm stuck, is in the area where all the text is. When I put more text into that page, none of the surrounding styles/boxes[?] adjust to the text format (also shown in a link below), and I can't seem to figure out how to center the entire page itself. Sorry, for the stupid questions, I'm a total novice, and can barely understand most of the CSS postings in this forum. Text extending instead of expanding layout: http://rafia.info/css/layers.bad.htm Thanks sincerely, rups27 Nevermind: solved Hi all, Does anyone have any good suggestions for a CSS book? I'd like to buy an all in one, that will teach me CSS. Thanks for any help I'm having a problem with my links becoming deactive within some nested elements. I followed some instruction on creating rounded corner boxes via a tutorial by Andy Budd. Anyway, it all works great except when I wrap link tags around a few pieces of copy. I'm a bit of a beginner still so maybe this is a simple fix but I've spent over a days worth of time now trying to figure it out on my own and can't seem to get it. Just to clear this up, the links work everywhere on the page outside of the "box" element I'll list below and I've double and triple checked that the link within the "box" element is written correctly and it is. The CSS even finds the link and styles it correctly, however, the mouse function seems to be disabled. Does this all make sense? Below is the CSS, any help would be greatly appreciated... This is the code that creates the box and it works correctly... Code: .box {
width:831px;
background:url(../imgs/box-spacer.gif) repeat-y;
}
.box h1 {
background:url(../imgs/box-top.gif) no-repeat left top;
padding-top:40px;
font-weight: normal;
}
.box .last {
background:url(../imgs/box-bottom.gif) no-repeat left bottom;
padding-bottom:60px;
}
.box h1, .box p {
padding-left:60px;
padding-right:60px;
}
And this is the code I used to test that the page is seeing it as a link... Code: .box h1 a:link {
color:#00CCFF;
}
.box h1 a:hover {
color: #FF0066;
}
It changes the color correctly but the hover doesn't work and if you click, it doesn't link you anywhere. Again, the link is written correctly on the page. Can anyone help please? I appreciate it. hi there, i am new to css and creating a gallery. What i want to do is create a medium size pop up when you rollover the thumbnail and have a full size image displayed when the thumbnail is clicked. I have to use lightbox javascript to display full size images, which works ok, but the problem has come trying to get both this and the roll over to work. At the moment i have both elements working, although it produces two thumbnail images. How can i use this code whilst making only one thumbnail appear? <a href="images/cramps/full size/c1.jpg" rel="lightbox" title="Here is the image caption"> <img src="images/cramps/thumbnails/ct1.jpg" border="0" /> </a> <a class="thumbnail" href="#thumb"> <img src="images/cramps/thumbnails/ct1.jpg" border="0" /> <span><img src="images/cramps/medium size/cm1.jpg" /><br /> </span></a> sorry if this is vague, i will answer any questions the best i can, all help appreciated! 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 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; } 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 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 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; }
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. 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 |
|||||||