|
CSS - Help Arranging Elements On The Page
Hi,
Can somebody help me to style elemnts on the page using % as unit of measurement & relative positioning so they'd look like -- - 20% - -- - 80% - +----------+----------+ | Element3 | Element1 | +----------+----------+ ----------- | Element2 | ----------- +----------+ ----------- | Element4 | ----------- +----------+ or even better like -- - 20% - -- - 80% - +----------+----------+ | Element3 | Element2 | +----------+----------+ ----------- | Element1 | ----------- +----------+ ----------- | Element4 | ----------- +----------+ The html can be as simple as Code: <div id="Element1">Element1</div> <div id="Element2">Element2</div> <div id="Element3">Element3</div> <div id="Element4">Element4</div> Similar TutorialsHello, I'm working on my first website, and so I've been doing a lot of research, but I've reached a problem I can't seem to solve on my own. I have a table and in one of the cells, I am trying to place a centered text with two stacked buttons to the right. I know I could create another table in just this cell, with the text having a row-span of 2, but that seems unnecessarily complicated. Is there an easier and/or more graceful solution using css? Here's what I want it to look like: http://img682. imageshack.us/img682/9208/goaln.png Here's what it currently looks like: http://img706. imageshack.us/img706/4108/currenty.png (Apparently, I am not allowed to post links as a new user. However, while I do not wish to break any forum rules, I feel that these images will help clarify what I am trying to accomplish.) Here's the code I have right now. html4strict Code: Original - html4strict Code <td> <div class="ounum">45</div> <div class="oubut"> <img id="ovr001" class="ou" alt="o" src="graphics/overRg.png" /> <img id="und001" class="ou" alt="u" src="graphics/undrRg.png" /> </div> </td> <td> css Code: Original - css Code div.ounum { float:left; vertical-align:middle; } div.oubut { float:left; display:inline; padding-left:2px; } img.ou { cursor:pointer; }
div.ounum {
Hi, I have spent ages trying to fix this. The problem is that the 'news' box on my site (www.getmooked.com/index.php) is meant to start at the same level as the other title 'welcome'. Whatever I do it doesnt seem to go to the same level. I cannot figure out how to do it without setting a negative margin, but then if the content on the left gets longer, the position of the news box gets lower down the page. Any ideas as to how to fix it? Cheers. The site has been uploaded to www.getmooked.com/index.php. The page code: 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">
<title>GetMooked.com</title>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="site-start">
<div class="logo">
<div class="logo-text"></div>
</div>
<div class="menu">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" data="img/menu.swf" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="750" height="40">
<param name="movie" value="img/menu.swf">
<param name="quality" value="high">
<embed src="img/menu.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="750" height="40" alt="Menu"></embed>
</object>
</div>
<div id="main">
<div id="box-left">
<div class="sub_header">
<h1>Welcome</h1>
</div>
<div class="header-image">
<img src="img/large_headers/boxes.png">
</div>
<div class="content">
</div>
<div class="sub_header">
<h1>Products and Services</h1>
</div>
</div>
<div id="box-right">
<div class="sub_header_right">
<h1>News</h1>
</div>
<div class="right-list">
<div class="right-item">
<h2>Place Holder Item </h2>
<h3>Place Holder Text Place Holder Text Place Holder Text Place Holder Text </h3>
</div>
</div>
</div>
</div>
<div id="copyright"><span id="bottom-links">HOME | SITE-MAP</span> 51 McKenzie House, Chadwick Street, Leeds, LS10 1PJ. info@getmooked.com
Copyright GetMooked.com & MookHost.com.</div>
</div>
</div>
</body>
</html>
The Style Sheet: Code: body {
background-repeat: repeat-x;
background-position: center top;
background-attachment: scroll;
background-color: #FFFFFF;
background-image: url(img/bg_fade_top.gif);
}
#copyright {
width:775px;
font-family:Arial, Helvetica, sans-serif;
color:#cccccc;
text-align:left;
font-size: 9px;
margin-left:3px;
}
.header_table_bg {
width:750px;
height:24px;
padding-left:10px;
padding-top:9px;
padding-bottom:9px;
background-image: url(img/linkbar/header.jpg);
background-repeat: no-repeat;
margin: 0px;
}
h1 {
text-align:left;
color:#CC0000;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
font-size:10px;
}
#main{
float:left;
margin-bottom:5px;
}
#site-start {
position: absolute;
top:0px;
width: 760px;
left: 50%;
margin: 0px 0px 0px -387px;
}
.logo{
width:108px;
height:80px;
background-image:url(img/logo/logo.png);
background-repeat:no-repeat;
margin-top:25px;
margin-left:0px;
}
.logo-text{
width:300px;
height:80px;
background-image:url(img/logo/logo_text.png);
background-repeat:no-repeat;
margin-top:0px;
margin-left:80px;
position: relative;
}
.header-image {
background-repeat: no-repeat;
margin: -5px 0px 0px 4px;
height: 100px;
width: 500px;
}
.sub_header {
width:500px;
height:24px;
padding-left:10px;
padding-top:9px;
padding-bottom:9px;
background-image: url(img/linkbar/sub_header.jpg);
background-repeat: no-repeat;
margin: 0px;
}
.sub_header_right {
width:250px;
height:24px;
padding-left:10px;
padding-top:9px;
padding-bottom:9px;
background-image: url(img/linkbar/sub_header_right.jpg);
background-repeat: no-repeat;
margin: 0px;
}
#box-right{
float:right;
padding-top:0px;
}
h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: normal;
color: #666666;
margin: 0px 0px 0px 3px;
padding: 4px;
}
h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: bold;
color: #333333;
margin: 0px 0px 0px 3px;
padding: 0px;
}
.right-item {
background-color: #F4F4F4;
margin-right: 15px;
margin-left: 5px;
padding: 2px;
margin-top: -5px;
margin-bottom:8px;
width: 235px;
background-image: url(img/right_box/dashes.png);
background-repeat: repeat-x;
background-position: top;
}
.menu{
margin-top: -5px;
margin-bottom: -5px;
}
.content-left{
width:467px;
text-align:left;
margin-bottom:3px;
margin-top:3px;
margin-left:5px;
line-height: 16px;
float:left;
vertical-align:top;
}
#bottom-links {
color: #999999;
font-weight: bold;
}
Hey I am working on a website and adding a Twitter feed next to a testimonial section. As I am a new member it states I cannot share a link so I'm not sure how I am going to show you the error. The testimonial div is lowered down in comparison to the Twitter feed div and I'm not sure why. Any suggestions? EDIT: I have added a negative top value, but is this the correct way of doing it? cameronclarkelaw [dot] com / index5 [dot] html Thank you, Mani I just figured out how to make a cool navigation bar with css, but adjusting the links in the bar also changes the style of all my other links on the page. Is it possible to have two sets of link styles, one that only applies on the navigation bar and one that only applies on my other text? The navigation bar and text each have their own div, if that helps at all. How would you go about this? Below is a sample of my CSS page, I'm having an issue with the floats that are commented out, they are affecting my th even though I haven't actually classed anything in my html... Any ideas? <code> /* CSS Document */ body { margin: 0; padding: 0; background-color: #000; color: white; font-family: "Lucida Grande"; font-size: x-small; } table.outer { border:1px solid #fff; width: 178px; } /*.left { float: left; } .right { float: right; }*/ table { clear: right; width: 700px; line-height: 1.4em; border-collapse: collapse; border: 1px solid #000; color: white; background: #000; font-family: "Lucida Grande"; font-size: x-small; }</code> Ok well the boss asked me to do a XHTML/CSS version of the website and get it up to snuff with web standards. Now I've done the coding to get the site to look the same in XHTML as it did before in HTML and tables... but there is one catch. I can't quite get my head around the easiest way to deal with captions underneath pictures. For example look at this page: http://www.zeroonedesign.com/aboutus.html Now in my version I haven't got the picture of the guys, or the "navigating our portfolio" bit. Take a look at my version he http://obelix.ca/zeroone/aboutus.html I was thinking about creating little block divs and positioning them absolute on the page... but that doesn't seem like much of a solution as I could see the stylesheet growing considerably if there was a page with a lot of these pictures with captions. Any reccomendations? How do you guys do captions with pictures? Hi, I've been trying to integrate my blog into my website to look exactly the same. I am using the same style sheet for my blog as for the rest of my website. Somehow, my logo and fonts and pictures are all smaller on the blog than on the real site. I did a 'view source' and then pasted that into a file called test.php and testing different changes to my css from that file so it doesn't affect the rest of my site. The code is very similar between my regular site pages and my blog pages because I copied much of the header stuff directly into my blog template. I am totally perplexed as to the incredible shrinking page element dilemma. I'm not sure how much code to paste in here to get the best help. What do I need to provide you to help me troubleshoot? Any ideas? pe123 Hi. I have a question about how to edit specific elements in a profile page. Take this as an example; worldwideweb.teenspot.com/profiles/Mumfie Scroll down and look at the box named "Specifics". Lets say I want to edit "Location" in that section from Norway to Sweden by using CSS. What is the procedure I should follow? The page allows you to edit CSS in an advanced page editor. Should I search up the source for that page and do some modification by pasting a new code? I'm working on a site with a div element with a fixed position, some 800 pixels from the left. The site is optimized for 1024x768. However, if a user with a resolution of 800x600 views the page, this div element will be missing, and the user won't be able to scroll over to see it. Is there some way I can get around this? One idea would be to align the div on the right instead of the left, but I don't want a lot of whitespace between my content (on the left) and my div (on the right). I was hoping that I could specify a parent element with a relative position, and that position: fixed would reference the position of the parent element, but that only seems to work when the child div element is position:absolute, not position:fixed. Thanks for any insight. Hello, Here's a link to a very short video (MOV format) showing the issue that I'm having. I'm guessing that it's CSS related. It seems like the screen update shouldn't be so obvious. The graphics involved are very small, as well. What could be causing this? Thanks for any help! blendernewbies dot com slash tmp slash screen_update_issue dot mov EDIT: well, it seems I can't post links! How am I supposed to accurately convey the issue without wasting people's time trying to describe it? Sigh. I will try to post the link in a written out format. I hope it doesn't violate anything doing it that way. The video is hosted on my own server and is about 800KB. Thanks. Hello all, I'm having a bit of trouble with a list of relative, floated <li> elements, each containing a single absolutely positioned div that appears on hover. I'm using the :hover pseudo-class currently but I will use JavaScript for IE6 once it displays correctly. The code is below. The problem is that the <div> appears on top of it's parent element but behind all other elements. Code:
#wrapper-body ul.staff-list{
list-style-type:none;
padding-top:10px;
position:relative;
}
#wrapper-body ul.staff-list-team{ width:313px; padding-top:0; padding-bottom:15px; margin-bottom:20px; border-bottom:1px solid #d7e3a9; }
#wrapper-body ul.staff-list li{
float:left;
width:230px;
position:relative;
padding:8px 0 8px 15px;
z-index:1;
}
#wrapper-body ul.staff-list-team li{ width:151px; padding-left:0; padding-left:5px; }
#wrapper-body ul.staff-list-team li.right{ padding-left:5px; }
#wrapper-body ul.staff-list-clerks li{ float:none; width:310px; padding-left:5px; }
#wrapper-body ul li.highlight{ background-color:#f4f6ec; }
#wrapper-body ul.staff-list li p{
padding:0 0 9px 0;
margin-left:91px;
}
#wrapper-body ul.staff-list li small{
padding:0 0 5px 0;
margin-left:91px;
}
#wrapper-body ul.staff-list-clerks li span{
color:#A6302B;
display:block;
float:left;
}
#wrapper-body ul.staff-list-clerks li span.clerk-name{ width:140px; }
#wrapper-body ul.staff-list-clerks li span.clerk-phone{ width:120px; background:url(../img/structure/clerks-phone.gif) 0 2px no-repeat; padding-left:23px; }
#wrapper-body ul.staff-list-clerks li a.clerk-email{ display:block; float:left; height:16px; width:16px; background:url(../img/structure/clerks-mail.gif) 0 3px no-repeat; }
#wrapper-body ul.staff-list li div.staff-list-detail{
display:none;
background:url(../img/structure/staff-list-bottom.gif) left bottom repeat-x;
padding-bottom:3px;
margin-top:-15px;
left:4px;
z-index:10;
top:15px;
position:absolute;
}
#wrapper-body ul.staff-list li div.staff-list-detail a{ background:url(../img/structure/staff-list-bullet.gif) no-repeat 0 4px; padding-left:8px; }
#wrapper-body ul.staff-list li:hover div.staff-list-detail{
display:block;
}
An image of what is happening below: Thanks for reading! I'm making a webpage for myself, and am coding to current Transitional XHTML and CSS standards. I'm using Firefox 0.9.2 for viewing the page. The problem I'm having is with adding a class to a <td> element and getting it to work correctly in IE 6. The CSS class I'm using for the <td> element is as follows: Code: .w3type{color: black; background-color: #FFCE6B;}
Code: .w3type:hover{color: white; background-color: red; background-image: url(images/mrgreen.gif); background-repeat: no-repeat; background-position: right;}
I add this class to a <td> tag: Code: <td class="w3type"> and when i view it in FF, the text and background work correctly, changing color and adding a little image to the right when I hover my mouse over it. The problem is that when I go to view the code in action with IE 6, neither the background nor the image will appear on hover. Is this a problem with IE, or my code? If you want to see the code on my site, here's the link. The css formatting in question is on the lower left corner of the page (the W3C webbadges). Thanks for any help I'm trying to align an image, header, and some text that is right aligned all on the same row. I've been reading so much about inline and block elements that my head feels like it's going to explode. It would look like this: Code: Picture - Header Text over here I'm not sure if everything should be span inside one class or what. I'm very confused. Please help a noob. Hi Guys, I have a generic Question/Problem to do with a Block Element (in this case a div) in an li tag. This seems to be a problem in browsers like IE8 and Safari but not IE7 and the latest FireFox version. Where with the div item 'drops down' a line from the li bullet. Like this (. is the li): . Here is My Div Content I want it to be like this: . Here is My Div Content Now this only doesn't happen if I just have plan text between the div with no class, so I'm thinking that something in my css dragHandle class may be at fault. Either that or I need to add something to it to do with float or display: line or block etc? Any thoughts or ideas are most appriciated (note I'm using a div in an li as I'm using the AJAX reorder list control and need something for a 'drag handle' to select an item in the list. The reorderlist uses ul and li to display itslef to I have to use this markup structure). Here is my markup. <ul> <li> <div class="dragHandle"> </div> </li> </ul> DragHandle class is as follows .dragHandle { width: 20px; height: 25px; background-image: url(/styles/icons/selectarrow.JPG); background-position: center; background-repeat: no-repeat; cursor: move; } Firstly, I'd like to say that I've been browsing this forum for a while now, as well as sites such as w3schools, and I've found it all to be very helpful. But now I have a situation that I haven't been able to solve on my own. Essentially, I want to make a clear and simple CSS-based layout that will work across browsers and platforms. I use a Mac myself, and it's difficult for me to check for problems with Internet Explorer. The problem I'm currently having concerns layout and positioning. Here's a link to the splash page I'm working on for a student organization: http://individual.utoronto.ca/ghp/fasu2006/ Before I make the full site I want to work out layout troubles I've been having. I got on a PC and the text when viewed with IE did not seem to properly align within the opaque white box I made for it. I've been feeling a little overwhelmed with concepts of absolute vs. relative positioning, unit values such as percents, px, em, and making use of things like padding, margins etc. and I'm hoping I can get some advice. So in one sentence, here is my question: How can I position elements (text, divs, images, anything) on the screen using CSS in an efficient way that will produce a similar result in different browsers? Here is the code that I think is relevant: Code: p {font-size: .75em; font-weight: bold; margin-left: 12em;
margin-top: 8em;}
#content {margin-top: 10px; margin-bottom: 10px;
margin-right: auto; margin-left: 3em;
width: 800px; padding: 20px;
background: transparent;}
#overlayback {position: absolute; top: 8em;
left: 15em; width: 250px; height: 250px;
z-index: 0;
filter: alpha(opacity=80); opacity: .80;
background: #FFF;}
#overlaytext {position: absolute; top: 3em;
left: 15em; z-index: 1;}
h1 {font-size: 6em; margin-left: .1em;
margin-top: .75em;}
h2 {font-size: 1em; font-weight: normal;
margin-left: 9em; margin-top: -4.5em}
</style>
</head>
<body>
<div id="content"><img src="images/tower.gif" width="297" height="422" alt="tower">
<div id="overlayback"></div>
<div id="overlaytext"><h1>fasu</h1>
<h2>2006-2007</h2>
<p>coming soon</p></div>
</div>
I hope I've been clear and thanks in advance for any advice. It's very much appreciated. Hi, q)I have a horizontal menu of 4 text buttons on top on screen and another bit of text on the left of it . I have a text element on far left and 4 text elements on far right . The whole section is in a div tag which displays it in a horizontal bar of 10% height. To place the text elements of far right I use float but this displays it on line below where i want it. I want text on far left and menu on far right (no spaces between each link) all in the same line. Code:
#t1 a {font-size:10px;
font-family:verdana;
font-weight:bold;
border:1px outset aqua;
background-color:aqua;
color:#000000;
text-decoration:none;
display:inline;
width:15%
word-spacing: 0;
}
...
<div id="t1">
This is the
place where the logo goes
<a href="#">Java Script</font></a>
<a href="#">Dynamic HTML</font></a>
<a href="#">Java Script</font></a>
<a href="#">Dynamic HTML</font></a>
</div>
Hi everyone -- first post here in the forums. I hope I can get some pointers on how to get my page to display correctly in IE. I have 2 div tags at the top of my page that are built sorta like this: Code: <div>
<ul>
<li>
some thing (images in my case, and a search bar)
</li>
</ul>
</div>
My css for these elements has "list-style:none;" -- and this works great in modern browsers like firefox, chrome, safari, opera... but the old dinosaur which 30% of my visitors still use doesn't handle this all right. See, I am displaying these list elements in a single horizontal row, but IE wants them in a single vertical column. UGH. I have a post with a screen shot from firefox and IE at this link: http://corneveaux.com/blog/new-animated-banner-and-internet-explorer-sucks So, I am sure its something I have done wrong -- but I cannot get my arms around the problem with firebug or IE developer tool bar. I am a total CSS newb here, so any tips much appreciated. Oh, and I checked and indeed my CSS validates. Thanks everyone! Hi all, after my last query it was suggested that my use of absolute positioning for every element was not necessary. I should go with the flow. So I copied a basic page structure and twiddled a little. Here is the result so far html link css link A couple of questions. 1. Would you say I'm on the right track, or should I be looking at a different style structure? 2. The page appears in ie to have gaps around the elements. In Mozilla it looks like I hoped it would look. How to close up gaps in ie. I'm trying padding, margin, negative values etc, Checking in the morning in hope of miraculous fix. No luck so far. Any help, advice appreciated. Thanks Solar.. I am new to css and just had a quick question. (please forgive me for any invalid lingo... hopefully you can make sense of my question) I am creating a dynamic calendar of events page, the calendar will be built using a table. If I put "table.calendar" in my style sheet to format the overall table, and I have th.calendar, td.calendar, do I have to add the "class" property to th or td, or will they automatically be in the calendar class because they are part of the table. For example... Do I do this? Code: <table class="calendar"> <tr><th></th></tr> <tr><td></td></tr> </table> Or this? Code: <table class="calendar"> <tr><th class="calendar"></th></tr> <tr><td class="calendar"></td></tr> </table> hello everyone, 'tis my frist post... Just had'a quick question I'm working on a page, and l'm trying to create a text input with a background image, that has NO border, so that it nests inside of a table cell with no excess fluff. However the input has a 1 pixel high "line" that spans across the top of the element, and a 1 pixel high "line" across the bottom as well. I can't seem to get rid of it, is it possible? here's the code, l was trying to get to work with this: Code:
<HTML>
<HEAD>
<style>
/*Left searchBar Cap*/
td.leftCap{
background-color: #c0c0c0;
background-image: url('images/searchBar_1x1.gif');
background-position: 0px 0px;
width: 28;
height: 50;
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
padding-left: 0;
}
/*right searchBar Cap*/
td.rightCap{
background-color: #c0c0c0;
background-image: url('images/searchBar_1x3.gif');
background-position: 0px 0px;
width: 34;
height: 50;
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
padding-left: 0;
}
/*searchBar Top bar*/
td.searchTop{
background-color: #c0c0c0;
background-image: url('images/searchBar_1x2.gif');
background-repeat: repeat-x;
background-position: 0px 0px;
width: 425;
height: 16;
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
padding-left: 0;
}
/*searchBar Bottom*/
td.searchBottom{
background-color: #c0c0c0;
background-image: url('images/searchBar_3x1.gif');
background-repeat: repeat-x;
background-position: 0px 0px;
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
padding-left: 0;
width: 425;
height: 15;
}
/*center of searchBar*/
td.searchCen{
background-color: limegreen;
background-position: 0px 0px;
width: 425;
height: 19;
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
padding-left: 0;
}
BODY {
background-color: #c0c0c0;
background-attachment: scroll;
margin-top: 0;
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
}
/*input*/
.input {
background-image: url('images/searchBar_2x1.gif');
color: #191919
border-width: 0px;
padding: 0px;
border-style: hidden;
border: 0;
border-top-width: 0px;
border-bottom-width: 0px;
font-family: Comic Sans MS (cursive);
font-weight: extra-bold;
font-size: 10pt;
width: 425;
height: 19;
}
</style>
</HEAD>
<BODY>
<center>
<form>
<table cellpadding="0" cellspacing="0">
<tr><td>
<table cellpadding="0" cellspacing="0">
<tr>
<td class="leftCap">
</table>
<td>
<table bgcolor="#c0c0c0" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="searchTop">
<tr>
<td class="searchCen">
<input type="text" size="40" class="input" value="search google ... ">
<tr><td class="searchBottom">
</table>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td class="rightCap">
</table>
<td>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolor="#c0c0c0" align="center">
<a onClick="javascript:searchGoogle();" href="#">
<img border="0" src="images/searchBar_1x4.gif" width="113" height="50"></a>
</table></table>
</form>
<script>
query = document.forms[0].elements[0].value;
function searchGoogle(){
if(query){
url = "http://www.google.com/search?hl=en&lr=&q="+query+"&btnG=Search";
window.open(url);
}}
</script>
</BODY>
</HTML>
Thanks for your help! Samantha G. |
|||||||