PDA

View Full Version : Why does this show up  


blimp
06-11-2009, 12:44 AM
Can someone please explain why   appears in my code when I hit return or enter on my keyboard.


I've started a new html document in dreamweaver and am working in design + code view. At the moment I have absolutely nothing on my page.

eg: http://img248.imageshack.us/img248/4951/picture2p.jpg

However if I click on the page and press enter or return I get this code.

eg: http://img32.imageshack.us/img32/7505/picture3q.jpg

edbr
06-11-2009, 01:09 AM
just the wayit is, hitting enter inserts a paragraph with a non breaking space.
if you want a line break use shift-enter (on windows)

blimp
06-11-2009, 01:55 AM
edbr,

The reason I ask this question (this is only my guess) is that I believe this &nbs; is what's causing my div's to break apart.

I've been emailing you regarding this problem the past few days, but I still don't understand why this is happening. As I've explained in my emails, as soon as I add text to any div, I get a gap that appears.

I'd like to make sure its not just happening to me.

Can you or anyone helpful enough copy and paste the code I have attached below in a new dreamweaver document, then preview it in your web browser.

Just so that you know, I'm on a Mac and use Safari and this is the result I get when I preview the below code.


http://img23.imageshack.us/img23/7678/picture4syc.jpg


As you can see in the screen snapshot from Safari, there is a gap between the top and middle div's.

Can you please explain why this happens..?

Like I said, as soon as I add any text, this happens, if I delete the text, the gap dissapears.


This is the code:


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--

p {
size:.3em;
font-family: Verdana, Geneva, sans-serif;
font-size: .7em;
}
#top {
height: 200px;
width: 600px;
background-color: #666;
}
#middle {
background-color: #999;
height: 300px;
width: 600px;
}


-->
</style>
</head>
<body>
<div id="top">
<p> There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
</div>
<div id="middle">
<P> There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</P>
</div>
</body>
</html>

blimp
06-11-2009, 02:05 AM
edbr, I also forgot to make mention that I know I can overcome this problem if I just add an absolute value to both the top and middle div's.

The reason I don't want to do that is that the site I'm about to create has been graphically designed in photoshop and will be exported from photoshop as a html document.

I was then going to open the exported html in dreamweaver and replace all the tables with div id's. That will give me control over which sections I can set background images and add text over those graphics.

But as you can see, If I try doing this the div's break up.

MagicPower
06-11-2009, 02:07 AM
The reason I ask this question (this is only my guess) is that I believe this &nbs; is what's causing my div's to break apart.

it's not breaking aprt your divs if it was the "&nbsp" you would see it in the code inbetween your two divs "top" & "middle".

blimp
06-11-2009, 02:11 AM
this is the result if I apply the absolute value to both div's

http://img150.imageshack.us/img150/9389/picture5fiv.png


and this is the code:


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--

p {
size:.3em;
font-family: Verdana, Geneva, sans-serif;
font-size: .7em;
}
#top {
height: 200px;
width: 600px;
background-color: #666;
position: absolute;
}
#middle {
background-color: #999;
height: 300px;
width: 600px;
position: absolute;
top: 200px;
}


-->
</style>
</head>
<body>
<div id="top">
<p> There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
</div>
<div id="middle">
<P> There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</P>
</div>
</body>
</html>



If I do it this way, it becomes a lot more time consuming as I would have to set position and placement values for every single div tag created.

Please tell me I don't have to do that....!

blimp
06-11-2009, 02:13 AM
MagicPower,

Then what's causing this to happen?

I just don't understand..... I've been at it for days now.

MagicPower
06-11-2009, 02:16 AM
the best possible thing you should have done at the start is to design it in DW. use PS to create the background images. i mentioned earlier in a diffrent thread that any text you export form PS to DW will be saved as image. My advice is slice your design in PS with the Slicer tool. Export the images to DW and style em up using divs/apdivs btw ap divs are free flow so you can jus drag them around.

edbr
06-11-2009, 02:18 AM
#header{
height: 200px;
position:relative;
width: 600px;
background-color: #666;
float:left;
margin:auto;
}
#middle {
background-color: #999;
height: 300px;
width: 600px;
position:relative;
float:left;
clear:left;
}


-->
</style>
</head>
<body>

<div id="header">


<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>

<div id="middle"><p>&nbsp;




</p> <p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>

</body>
</html>

blimp
06-11-2009, 02:23 AM
MagicPower,

The way I'm interpreting your reply is that I should have created 2x div's

<div id="top">
<div id="middle">

then for the text, I should have placed it in an ap div.

Is that what your implying and one way to go about this?

blimp
06-11-2009, 02:32 AM
edbr,

I added the CSS rule you just posted above and WOW....... IT WORKS.


So you added in RED

#header{
height: 200px;
width: 600px;
background-color: #666;
position:relative;
float:left;
margin:auto;
}
#middle {
background-color: #999;
height: 300px;
width: 600px;
position:relative;
float:left;
clear:left;
}

Can you explain why and how that has made the difference?

MagicPower
06-11-2009, 02:35 AM
MagicPower

The way I'm interpreting your reply is that I should have created 2x div's

<div id="top">
<div id="middle">

then for the text, I should have placed it in an ap div. Is that what your implying and one way to go about this?
no no if you r starting from scratch, create a div call it wrapper or mainholder or whatever - thats gonna hold everything. then your div top n div middle can go in that. in order for div middle to be below/under div top you should float both divs. tis is my opinion coz its how av gone about when designing my site BTW when previewing your design, in live view it will look different from when u preview it in IE, Safari, firefox, et al. do i make sense?

edbr
06-11-2009, 02:45 AM
yes of course a wrapper is advised and is advised on a regular basis here but that is not this posters question or problem at this point.

blimp
06-11-2009, 02:48 AM
MagicPower

You make perfect sense..... :-)

So I should be doing something like this.


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#wrapper {
background-color: #000;
height: 600px;
width: 600px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#header {
float: left;
height: 100px;
width: 600px;
background-color: #666;
}
#content {
background-color: #999;
float: left;
height: 200px;
width: 600px;
}
-->
</style>
</head>

<body>
<div id="wrapper">
<div id="header">
<p>This is some dummy text</p>
</div>

<div id="content">
<p>This is also some dummy text im adding to the content div</p>
</div>
</div>
</body>
</html>

blimp
06-11-2009, 02:55 AM
Ok I understand that a wrapper div will solve my problem.

What I want to know now is edbr added the following changes to my CSS rules and over came the problem.


#header
position:relative;
float:left;
margin:auto;

and to the

#middle
position:relative;
float:left;
clear:left;

Can you please explain why and what these settings do?