PDA

View Full Version : Creating a div #wrapper which says <p div="wrapper">


Abbica
08-17-2010, 10:45 AM
Hi Can I ask why this is happening, I am creating a new page, new site etc and when I go to create a new wrapper Advanced ID it goes in on my code view as <p id="wrapper">&nbsp;</p>. Why won't it say <div id="wrapper">. I am creating an advanced ID with hash? Just a basic Css style for this so I don't know what I am doing wrong. ex of wrapper div:-
#wrapper {
width: 800px;
margin-right: auto;
margin-left: auto;
position: relative;
}

Then another thing that happens is when I create my top bar area in on the wrapper for logo etc., it replaces the Wrapper p div with the top bar div? Can anyone tell me what is wrong with this, what am I doing wrong.

Also, can I just ask, when I insert my body Div for my text, when I press return regarding a paragraph for type it jumps out of the div onto the wrapper, how do I keep it within the div, is this something to do with the positioning or margins etc.? Any help with this would be greatly appreciated as I can't even get started on drafting up this until I get past the body wrapper stage!!!

Corrosive
08-17-2010, 11:15 AM
In all honesty it has a LOT to do with cr*ppy 'design' view. Get out of the habit of using it and learn how to hand code (seems like you already know what the correct syntax should be) before DW bloats your code beyond all recognition!

Abbica
08-17-2010, 11:21 AM
Hi, thanks for reply, I will try on my laptop this evening, so many project folders started for this I just better start fresh.

But do you know what I am doing wrong with my divs for my body, so when I press return it jumps out of my div. I really can't figure that out and it is really annoying everytime I press return for paragraph I have to hold shift return to stay within the div?

Corrosive
08-17-2010, 11:42 AM
Return gives a hard break and creates a new paragraph (I think) and shift and return creates a soft break <br> that goes on the line below. So a hard break is creating a new opening paragraph tag and so putting it outside of your <p id="wrapper"></p>. Again I'd encourage you just to work in code view as this is a rather annoying 'feature' of design view.

Corrosive
08-17-2010, 11:49 AM
Just to add that you should at least work in Split View and see what the key strokes are doing to the code. That may help explain what is going on.

Abbica
08-17-2010, 03:02 PM
Hi, yeah, I have it in split view, it just says <br> everytime, I can't seem to press return without pressing shift first, just can't figure it out how to stay within Div, but thanks anyway, its just a normal body div which I made relative to my auto margins, left and right, that's it. This css/dreamweaver will have me institutionalised yet!

Corrosive
08-17-2010, 03:06 PM
I'm not really sure what you mean by 'a normal body div'. If you post your HTML & CSS I can clean it up for you.

Abbica
08-17-2010, 03:16 PM
Hi, thanks for this, wish I could give you the whole site to do, so much for doing a favour!! Here is the code for my body text
<p class="bodytext" id="body"><span class="style20">Serviced Offices </span><br />
<br />
With more than forty individual offices can provide your company with as much, or as little, office accommodation as you need. Wparticularly specialise in office suites for 1 - 6 people with an opportunity to expand into our larger accommodation, making this the ideal option for small-to-medium sized companies, new business start-ups and sole practitioners. For example current tenants include solicitors, insurance brokers, accountancy firms and surveyors, plus many other professions. <br />
<br />
All offices are fully equipped with essential office furniture. However, should you already have your own furniture there is no need to pay additional storage costs - subject to arrangement we can provide an empty office. It operates on a licence agreement basis with rental periods to suit each individual company's requirements. Minimum stay is just three months. <br />
<br />
We pride ourselves on providing our clients with a full spectrum of professional services and facilities.<br />
<br />
The following services are <strong>INCLUDED</strong> in the monthly VAT Free rental charge:<br />
<span class="lineheight"><br />
Professional Reception Service (Mon - Fri 8.30am - 5.00pm) <br />
Telephone answering and message taking (Mon - Fri 8.30am - 5.00pm) <br />
Water cooler<br />
</span> </p>

The CSS is
}
#body {
width: 600px;
position: relative;
padding-right: 15px;
float: right;
padding-top: 10px;
}
.bodytext {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 16px;
color: #000000;
text-align: left;
font-weight: normal;
}

Corrosive
08-17-2010, 04:19 PM
You may as well give the whole page and CSS so I can see it in context :)

Corrosive
08-17-2010, 04:40 PM
HTML (tidy)


<div id="body">
<h1>Serviced Offices</h1>
<p>With more than forty individual offices can provide your company with as much, or as little, office accommodation as you need. Wparticularly specialise in office suites for 1 - 6 people with an opportunity to expand into our larger accommodation, making this the ideal option for small-to-medium sized companies, new business start-ups and sole practitioners. For example current tenants include solicitors, insurance brokers, accountancy firms and surveyors, plus many other professions.</p>
<p>All offices are fully equipped with essential office furniture. However, should you already have your own furniture there is no need to pay additional storage costs - subject to arrangement we can provide an empty office. It operates on a licence agreement basis with rental periods to suit each individual company's requirements. Minimum stay is just three months.</p>
<p>We pride ourselves on providing our clients with a full spectrum of professional services and facilities.</p>
<p>The following services are <strong>INCLUDED</strong> in the monthly VAT Free rental charge:</p>
<ul>
<li>Professional Reception Service (Mon - Fri 8.30am - 5.00pm)</li>
<li>Telephone answering and message taking (Mon - Fri 8.30am - 5.00pm)</li>
<li>Water cooler</li>
</ul>
</div>
<!-- body ends -->


CSS


#body {
width: 600px;
position: relative;
padding-right: 15px;
float: right;
padding-top: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#body h1 {font-size: 12px; font-weight: bold;}
#body p {
font-size: 11px;
line-height: 16px;
color: #000;
text-align: left;
font-weight: normal;
}
#body ul {font-size: 11px;}


Just to explain a few things I have put the title in an h1 tag. Not sure if this is what you need for the page (it may be h2 or h3 and so on) but you can change to suit. Style the header tags with CSS as usual.

I have used an unordered list for the list of services... Makes sense huh?

Hi, thanks for this, wish I could give you the whole site to do, so much for doing a favour!!

Who is the favour for?

Abbica
08-18-2010, 08:26 AM
Thanks Corrosive you have been a great help with all of this, like your simplified H1 coding, will do that. I restarted the whole thing on my laptop last night so it worked fine, for now, see how it goes again tonight, could open it up and it will be all over the place but I know I must do that xml etc course, time to face my demons. thanks again.

Corrosive
08-18-2010, 08:57 AM
You are welcome. Please take my advice about learning the code though. Design view is basically for checking how your page looks. If you build your page in it you'll get in a right old mess and you can hopefully see the benefits of hand coding as my code looks a lot neater (and probably took me less time) then yours. Code also needs to 'read' well. It's not just how it displays in a browser (although that IS important) it is also about if your page makes sense if you take away the stylesheet (images, styles etc) as someone with a screen reader might do.

Good luck and 'don't fear the code' ;)