trying to write a simple thing in css

Discussion in 'HTML & Website Design' started by ophir.oren, Jan 3, 2007.

0
  1. #1
    hi all,
    I'm trying to make myself more and more writing xhtml insted of old html, and using more css then I do table.
    I'm trying to write somthing simple....... here is the code for the html:
    
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>כון לפתרון-MAT</title>
	<link href="design.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
		<div id="container">
			<div id="top">
				<div class="topItem"><img src="images/top.jpg" alt="" /></div>
				<div class="topItem"><img src="images/logo.jpg" alt="" /></div>
			</div>
		</div>
		
    </form>
</body>
</html>
    Code (markup):
    and here is the code from the css file:
    
body 
{
	background-color: #E5E5E5;
	text-align: center;
}

div#container 
{
	width: 810px;
	display: table;
}

div#top 
{
	height: 160px;
	display: table-row;
}

.topItem
{
	height: 160px;
	float: left;
	display: table-cell;
	vertical-align: bottom;
}
    Code (markup):
    now what happens is that "top.jpg" is higher than "logo.jpg" and both images appear one next to the other, only the logo appears not in the same line as top. the logo should go down (I even typed in vertical-align: bottom) - but it keeps staying up.
    how do I fix that?
     
    ophir.oren, Jan 3, 2007 IP
  2. Neutrino

    Neutrino Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Give each image its own class, then position them wherever you want. You can use pixel or percentage to position, it's quite easy.

    http://www.w3schools.com/css/css_positioning.asp

    = )
     
    Neutrino, Jan 3, 2007 IP
  3. unitechy

    unitechy Peon

    Messages:
    350
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #3
    have you tried width="100" height="100"
    i mean your code be as
    
<div class="topItem"><img src="images/top.jpg" alt="" width="100" height="100"/></div>
				<div class="topItem"><img src="images/logo.jpg" alt="" width="100" height="100"/></div>
    Code (markup):
     
    unitechy, Jan 3, 2007 IP
  4. ophir.oren

    ophir.oren Peon

    Messages:
    141
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #4
    ok. I found what to do - I just pot padding-top to the image style with the pixel needed.
    but now I have a different problem....
    I have this:
    
body 
{
	background-color: #E5E5E5;
}

div#container 
{	
	text-align: center;
}

.topBar
{
	width: 810px;
	position: absolute;
}

.bar1
{
	float: left;
	display: inline;
}
.bar2
{
	position: absolute;
}
    Code (markup):
    topBar is inside div#container - on IE it shows up in the middle. on FF it's on the left. I need it in the middle - why isn't it in the middle in FF?
     
    ophir.oren, Jan 3, 2007 IP
  5. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Don't forget to use a proper DOCTYPE as well. Without a valid DOCTYPE, you might as well be using vanilla flavor HTML.
     
    Dan Schulz, Jan 3, 2007 IP
  6. popstalin

    popstalin Peon

    Messages:
    47
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Try 
    margin:0 auto;
    Code (markup):
    instead of 
    position:absolute;
    Code (markup):
     
    popstalin, Jan 3, 2007 IP
  7. ophir.oren

    ophir.oren Peon

    Messages:
    141
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #7
    thanks :) now I encounter another problem..... wow, I didn't think it will be that complicated. with the plain HTML I do that entire page in 2 minutes. Is XHTML & CSS really better and worth the trouble?

    so here's my next one....
    here is how my code looks now (the first is the html and the second is the css):
    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>כון לפתרון-MAT</title>
	<link href="design.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
		<div id="container">
			<div id="t1"><img src="images/top.jpg" alt="מתכון לפתרון" /></div>
			<div id="t2"><a href=""><img src="images/logo.jpg" alt="מתכון לפתרון" /></a></div>
			
			<div id="content">
				<div id="news">
				</div>
				
				<div id="page">
					test1
				</div>
				
				<div id="menu">
					test2
				</div>
			</div>
		</div>
    </form>
</body>
</html>
    Code (markup):
    
body 
{
	background-color: #E5E5E5;
	text-align: center;
}

img
{
	border-width: 0px;
}

div#container
{
	margin: 0 auto;
	width: 810px;
	display: table;
}

div#t1 
{
	float: left;
}
div#t2
{
	float: left;
	padding-top: 36px;
}

div#content
{
	padding-top: 161px;
	position: relative;
	display: table-row;
}

div#news
{
	width: 197px;
	height: 353px;
	float: left;
	background-image: url('images/news.jpg');
	display: table-cell;
}

div#page
{
	width: 431px;
	float: left;
	display: table-cell;
}

div#menu
{
	width: 182px;
	float: left;
	display: table-cell;
}
    Code (markup):
    now I'll explain: this creates a good looking table according to the design I need. but the problem is that the news div only appears in the main page. when someone will view an inner page the news box should disappear (just to make things clear - this code is inside an aspx master page and the program just show or un-show the news box).
    In old HTML what I used to do is make a table, give the menu cell a fixed width (with "nowrap" attribute), give the middle content cell a width of a 100%, and give the news cell a fixed width (with "nowrap" attribute). In this case it would show up fine. and when the news cell isn't displayed the middle cell (the one with 100% width) just took over it's space.
    how can I accomplish it here?
     
    ophir.oren, Jan 4, 2007 IP