PDA

View Full Version : Newbie needs help


Woken Weaver
03-23-2011, 02:21 AM
:confused: ok I have only been using DW for about a week now, and have been learning through tutorials on my ipad.. they are great.. but they don't touch on certain mechanics and what not.. I am having a problem that hopefully one could address. OK.. I have made a sidebar with a left float. I have a right margin of 15. I have some p's to the right of it obeying the margin of the sidebar.. BUT i also have an ul that is infringing on the margin.. basically the bullets on my ul are butting right up against the right of my sidebar.. can anyone figure out why this is happening? I know it's probably simple, but 5 days ago was my first attempt at any coding/weaving
thanks for the help! :grin:
also another question how would i add new elements to the left/right of other elements.. say i design everything and later figure i want to put a small picture in on the right of some <p>because i have some extra space to toy with
an answer to either question would be amazingly helpful!

edbr
03-23-2011, 02:25 AM
post code or url

Woken Weaver
03-23-2011, 02:28 AM
Here it is. It's only in the Live view where it's having the problem

<!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>Becoming A Pro</title>

<style type="text/css">

#Master {
width: 960px;
margin: 0px auto;

}
#Header {
background-color: #CCC;
margin-bottom: 5px;
border: 1px solid #000;
height: 100px;
}
#Menu {
background-color: #CCC;
height: 300px;
width: 150px;
float: left;
border: solid 1px #000;
margin-right: 5px;
}
#Content {
background-color: #CCC;
float: left;
margin-bottom: 5px;
border: 1px solid #000;
width: 801px;
}
p {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
color: #000;
cursor: auto;
line-height: 17px;
margin-left: 5px;
}
ul {
font-size: 13px;
text-indent: 20px;
margin-top: 25px;
margin-bottom: 25px;
list-style-type: disc;
}
.Sidebar {
font-family: "Comic Sans MS", cursive;
font-style: italic;
width: 150px;
background-color: #CF9;
border: 5px dashed #333;
float: left;
margin-left: 5px;
margin-right: 15px;
padding: 5px;
}
#Footer {
background-color: #CCC;
height: 50px;
border: 1px solid #000;
clear: both;
}
h1 {
font-family: "Comic Sans MS", cursive;
font-size: 20px;
margin-bottom: -15px;
}
h2 {
font-family: "Comic Sans MS", cursive;
font-size: 20px;
margin-bottom: -15px;
}
</style>

</head>

<body>

<div id="Master">

<div id="Header">Div AKA Box </div>
<div id="Menu">Div AKA Box</div>
<div id="Content">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt ante eu enim luctus sed mattis metus sagittis. Etiam suscipit, felis in suscipit consequat, arcu est blandit urna, et viverra quam sapien sit amet arcu. Morbi faucibus purus vitae enim dictum vitae commodo dolor feugiat. Ut luctus lorem ac nisl laoreet bibendum. Nullam eget odio leo. Cras sed consectetur odio. Aliquam vel nisi massa, sed ullamcorper nulla. Cras tempus risus porta risus elementum dignissim. Morbi fermentum magna ut velit eleifend porta. Nulla commodo nulla vel odio rutrum tempor. Nunc eu eros leo. Morbi aliquet varius lacus, sit amet mattis neque viverra nec. Mauris id eros dolor.<br />
</p>
<h1>Donec eu lorem ut lacus.</h1>
<p> Suspendisse potenti. Fusce ipsum tortor, molestie luctus feugiat non, volutpat porta velit. Suspendisse potenti. Praesent sollicitudin accumsan est. Nunc nec cursus metus. Curabitur nec odio sed lectus ultrices aliquet ac ut felis. </p>
<p class="Sidebar">Nunc rutrum ipsum in ante imperdiet sit amet tempor velit ultricies. Nunc et lectus nisi. Pellentesque elementum, ante a suscipit dictum, ante libero cursus dui, ut vestibulum lacus urna in dui. Integer vestibulum iaculis risus, at consequat enim luctus sit amet. Cras quis dolor erat, sit amet tempus nulla. Aliquam massa lectus, suscipit sit amet consectetur in, laoreet nec dui. Pellentesque eu felis in magna iaculis cursus mollis in ipsum. </p>
<p>Curabitur imperdiet leo vel libero laoreet ac iaculis nibh ultricies. Maecenas tincidunt nisl dignissim vestibulum viverr risus- </p>
<ul type="square">
<li>nisl viverra felis</li>
<li>non blandit</li>
<li>orci magna in elit.</li>
</ul>
<h2>Nulla ornare augue a nunc.</h2>
<p> Curabitur bibendum varius ante, quis viverra massa placerat eget. Quisque vitae nisi velit, sit amet suscipit nibh. Duis eget turpis quis augue mattis tristique ac ac orci. In scelerisque metus in ligula interdum accumsan at quis ligula. Sed urna tellus, lacinia sit amet pharetra ac, interdum sed metus. Ut sapien ante, rutrum ac imperdiet tempus, blandit sit amet purus.</p>
<p> Etiam ac venenatis elit. Ut sollicitudin, quam vitae ornare dignissim, ligula magna hendrerit ipsum, nec tincidunt odio elit in velit. Praesent aliquam tellus tellus. Phasellus luctus suscipit mattis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed vel nibh arcu. Cras vehicula tristique nibh, id mollis nisi interdum vel. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer quis lacus dui. Nam malesuada tempus ipsum id sodales. In vitae volutpat augue. Duis a orci sed arcu rutrum sodales sit amet ac tortor. </p>
<p>Cras facilisis auctor mauris ac eleifend.</p>
</div>
<div id="Footer">&copy;2011. All Rights Reserved.</div>


</div>
</body>
</html>

Woken Weaver
03-23-2011, 02:46 AM
As you can tell it's not a real site, it's my second practice site. The reason I'm asking is because I want to get as good as possible at this.
Thanks

DWcourse
03-23-2011, 03:54 AM
Your paragraph sidebar is floated left. Which means the content of the html objects after it wraps around the sidebar. That content is paragraphs and your unordered list (ul). However only the content of those objects wraps the objects themselves don't wrap. Think of the obects p and u; as containers. The containers actually flow behind the sidebar (and only what's inside them wraps).

That means that the margin and padding on those p and ul tags don't have any visible effect unless they are greater than the width of the sidebar.

So to move your unordered list over you need to set its left-margin to 190px (the width of the sidebar plus left and right padding, margins and borders - Google "HTML box model"). And also get rid of the text-indent property. So your ul style rule will look like:

ul {
font-size: 13px;
margin-top: 25px;
margin-bottom: 25px;
list-style-type: disc;


There are a few reasons why the way you've don't things isn't optimal. What I would recommend is starting out with one of the built in layouts Dreamweaver offers and reading the comments in the HTML and CSS files.

Woken Weaver
03-23-2011, 04:35 AM
DWCourse,
Thanks! :mrgreen: Also I'm glad you went into detail explaining the why.

DWcourse
03-23-2011, 01:14 PM
To place an image to the right of the ul, you would insert it before the ul and use the CSS float-right property. For HTML object with a float right or left, the content of the objects after them in the code wrap around them.

Otherwise the objects appear on the page in the order they appear in the code.

IronIgnisee
03-26-2011, 09:53 AM
У нас можно выбрать hmf кран манипулятор (http://www.fassi.ru/) по очень низкой стоимости. Лучшие западные марки для Вас. Ожидаем Ваших звонков.