DIVaculties

  • Thread starter Thread starter J.B
  • Start date Start date

J.B

J.B

Soldato
Joined
16 Aug 2006
Posts
5,924
What a catchy thread name! :D

Im hoping someone could help with a <DIV> problem. I've looked on google but cant seem to find my problem. Im expermenting with div tags and am having some trouble:

Code:
<head>

<title>Untitled Document</title>
<link href="/CSS-Div.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div style="top: 107px;
      left: 307px;
      position: absolute;
	  width: 172px;
      visibility: show;">Tester</div>

<div class="header">CSS Test </div>
</body>
</html>

Code:
div.header {

top: 138px;
left: 174px;
position: absolute;
width: 172px;
visibility: show;
}

Basicly, the DIV with its attributes in the HTML code works well, but the CSS attributes arent being picked up. Im betting I missed something blindingly obvious but I cant see it!

Just so you know; I've tried other tags in the CSS file work so its deffernatly linked to the HTML correctly
 
Try changing "div.header" to "#header"
Also try not to use absolute positioning unless absolutly neccesary its not great when it comes to compatibility
 
Last edited:
and changing "class=header" to "id=header"?

when I do that it moves the div box to the correct position on DW, but not when I actually look at the page in IE
 
This is one reason I avoid DW it messes me right up when it does things like this have you tried viewing it in a different browser such as firefox?
 
Yeah I normally try not to use DW for any hardcore coding, but i thought this piece of code is so simple how can it go wrong! :rolleyes:

I havent tried it in any other browser, it really needs to be viewable in IE and I dont have anything else installed
 
Code:
<html>

<head>
<title>Untitled Document</title>
<link href="CSS-Div.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div class="test">Tester</div>

<div class="header">CSS Test</div>
</body>
</html>

Code:
.header {

top: 138px;
left: 174px;
position: absolute;
width: 172px;
visibility: show;
}

.test {
top: 107px;
left: 307px;
position: absolute;
width: 172px;
visibility: show;
}

Works fine for me, well it repositions both of the DIV's to where you want them for whatever reason!

That was running 2 files both on desktop, if CSS is in another folder then you will need to specify which
 
Well basicly I dont want it set in any perticular way, Im just experimenting with CSS and DIV. Would just like to be able to edit the CSS to move a box around.

It's nothing overly important I just thought it's time I learnt how to do this properly
 
Code:
*{
margin:0px
padding:0px
}

#header {
position: absolute;
top: 138px;
left: 174px;
width: 172px;
visibility: show;
}

#test {
top: 107px;
left: 307px;
position: absolute;
width: 172px;
visibility: show;
}

Code:
<html>
<head>

<title>Untitled Document</title>
<link rel="stylesheet" href="test.css" type="text/css"/>
</head>

<body>

<div id="test">Tester</div>

<div id="header">CSS Test </div>
</body>
</html>

My way comes up with the same as tsinc80697's but is ever so slightly different
 
Ok thanks guys. Both those ways seem to work, no idea whats happened there! :confused:

While I've got people attentions would someone mind explaining why someone would use class and why someone would use id?
 
Use ID for things that happen once - e.g., the header of a page. Use class for things that happen lots - e.g., emphasised text, or an image box you may have created.

ID's shouldn't be in the same document twice :) But classes can be there however many times
 
just had another quick look and all you had to do was remove the "/" from your "/CSS-Div.css"
 
Back
Top Bottom