|
CSS - Back To Basics
Following my previous post ( http://forums.devshed.com/t243381/s.html ) I'm going back to basics with http://alphaworks.co.uk/problems/divs/ to try and get things straight with the more complicated designs. What is the 'right' way to achieve this layout? Is it possible to do it without using "position:absolute" and have it all flowing naturally?
All advice appreciate! Thanks, Geoff Similar TutorialsK so... I feel ridiculous. I'm teaching a group on layouts with CSS... and I've run into an elementary question on my own. I'm just demonstrating the basics of the Box Model in all its glory, and here's my two pages: www.nickhand.net/boxmodel.html www.nickhand.net/boxmodel2.html The only difference in the two pages, is I added top-padding: 1px; to boxmodel2.html's styling. Why in the world would there be such a drastic difference when just setting a padding? If I make it 0, it goes back to the same as boxmodel.html, but if I make it padding: 1px;, it adds what I'm guessing is 11px to the top. What basic thing am I missing here? TIA! Savingstrangers Please Help me. I have a some small problems on Css. I used background image. when windows are 1024*786 resulation then everything is okey. but when i changes resulation 1280*1024 now I have see this background problem personal.infinitedesigner.com/table.html See this link and please help me. I want to solve this problem. Thanks. Hi all, I seem to be having some problems between FF & IE i have the background image set at 100% in CSS and it works fine in IE but if you look at it in FF there is some of it missing.. Here is the script If you look at it in IE first you will see what it is meant to look like.. Code:
/*
* Main Background
*/
#main-body {
margin: 0px auto;
width: 999px;
height: 100%;
background: url('./images/bricks.jpg') 100% repeat;
}
So what am i missing ? Yet another question about CSS layout. All I want is a block that encloses three others on the left (title), centre(description) and right(image) of the encapsulating block. I can do this with my eyes shut using tables but after several frustrating hours scanning online CSS tutorials, tryng DIV, SPAN, float left/right/AnywayAtAllAndPleaseDearGodWorkThisTime, I'm still no nearer the truth. Code:
<HTML>
<HEAD>
<style type="text/css" media="screen">
.header {
background-color : #E7D69C;
font-family : verdana, "trebuchet MS", "MS sans serif", sans-serif;
font-size : 1.1em;
color : black;
border : 4px #CCDFCC groove;
margin-left : 5%;
padding-left : 0.2em;
padding-right : 0.2em;
width : 90%;
}
.headerTitle {
float : left;
width : 33%;
position : relative;
}
.headerDescription {
float : left;
text-align : center;
width : 33%;
position : relative;
}
.headerImage {
text-align : right;
width : 34%;
position : relative;
}
</style>
</HEAD>
<BODY>
<DIV CLASS="header">
<DIV CLASS="headerTitle">
Title
</DIV>
<DIV CLASS="headerDescription">
Description
</DIV>
<DIV CLASS="headerImage">
Image
</DIV>
</DIV>
</BODY>
</HEAD>
Can anyone stop my slide back into tables? I moved internal css to an external file and then linked the page to that file and lost my hand cursor on links. How do i get it back. Right now the arrow cursor remains when links are rolled over. Can be viewed at. kopertone.com/newsite/index1.html Also, in fire fox, I want dotted lines under my text links when rolled over, but not image links; how do I remove the dotted lines under my image links? Thanks! I have links like this: Code:
<a href="dosomething.php?action=add&s=A-9&PHPSESSID=cb55242c6d177734ab45f07ad821b7ad"
id='A-9'
title='A-9 status=sold'
>
<img src="http://example.com/images/x.gif" height="21" width="15" border="0" ><i>A-9</i></a>
The problem is the image overlays the element where the tooltip is so when you mouseover the image area the tooltip doesn't happen. I can't just move the tooltip to the image element because I have a javascript that makes the tooltips really nice looking, but it is written for links I've tried fooling around with the z-index, I set it really high in the style id for the div that wraps these elements hopefully to bring them in front of the images. But it didn't do what I want. Any suggestions? You guys are great! Slowly I am getting my head around this css stuff. After I'm done paying the initiation fee (much headscratching and experimenting) I'll be one of those people too who goes around not being able to explain why css is so cool, just trust me it is. |
|||||||