How do you create a simple image & text layout side-by-side 2

[sam0077]

Hello, I am not a programmer/developer - I am simply trying to build a new website for my business. I also thought I could learn some basic XHTML and CSS for beginner work.

I have searched all over the Internet for the answer to this simple question:

HOW DO I SET UP A LAYOUT in XHTML and in CSS where there are 4 bullet H3 headers on the left and a 437x317 image on the right. It is for the homepage.

I will not tell you how many hours I have searched for the answer to such a simple layout. I am embarrassed to admit it. So I joined your forum even thought I am not a programmer.

Thank you in advance for your help.

SIGNED: Trying the coding route and not the WYSIWYG route.

P.S. - I submitted this as a thread to another post but then thought the forum would prefer a separate post.

 

[Vragabond]

Not much we can help you here. If I understand you correctly and you want a list with four bullets and have h3s inside them, do the following:

1. Create a list. Within the list-item you can nest just about any element.
2. Put [

http://www.htmldog.com/guides/htmlbeginner/headings/

]h3[/url] elements inside of the specific list items.
3. Before the list, put an image that you want. Float the image to the right.

You should be there. Consult this introductory article to the css as well:

http://alistapart.com/articles/practicalcss

And don't forget to check other stuff on the htmldog page to which I am linking within the text.

 

[vacunita]

something in the realm of the following should work:

<style>
#leftside{
float:left;
width:300px;
font-family:Arial;
border:1px solid red;
overflow:hidden;
}

#imagesection{
float:left;
width:437px;
height:217px;
border:1px solid black;
background: URL(location\of\image.jpg);
}
</style>




<div id="leftside">
<h3>header1</h3><br>
...
</div>
<div id="imagesection">
Some text that might go on top of the image.
</div>

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[sam0077]

Would you believe that I STILL can't make it work even with the coding you provided?

Please bear with me. I started learning XHTML & CSS 4 days ago and even though I have been diligent, it is still not sinking in.

Could you please take a look at my code and let me know what I have done wrong? THANK YOU!!

CSS CODE:
-----------------------------------------
body {
width: 760px;
text-align: left;
margin: 0 6em;
background-image: url(newmbb_datafiles/newmbb_background1.jpg);
background-color: #777777;
background-repeat: no-repeat;
background-position: 25% +25%;
background-attachment: fixed;
font-family: Georgia, "Times New Roman", Times, serif ;
font-size: .8em;
line-height: 1.4em;
font-weight: normal;
font-style: normal;
}

div#navbar {
font-family: Georgia, Times, "Times New Roman", serif;
font-size: 1.1em;
font-weight: bold;
width: 750px;}

#navbar ul li a:link, #navbar ul li a:visited {color: #777777;
background-color: #e6fcf4;
text-decoration: none;
border-top: solid #ffffee 2px;
border-left: solid #ffffff 2px;
border-bottom: solid #cccccc 2px;
border-right: solid #aaab9c 2px;
display: inline;}

#navbar ul li a:hover {color: #484751;
background-color: #e6fcf4;
text-decoration: none;
border-top: solid #cccccc 2px;
border-left: solid #aaa9bc 2px;
border-bottom: solid #ffffee 2px;
border-right: solid #ffffff 2px;}

#navbar a.current {text-decoration: none;}

#navbar ul li {list-style-type: none; display: inline;
padding-top: 1em;
}

#navbar ul {padding-top: 6em;
}

/*Relates to Selection of Menu Item*/
a:link {color: #0000ff;
text-decoration: none;}
a:visited {color: #990099;
text-decoration: underline;}
a:hover {color: #0000ff;
text-decoration: underline;}


/*div#main_text {
padding-top: 5em;
padding-left:8em;
}

div#websites_image{
background-image: url(newmbb_datafiles/sites_etc.png) alt "websites_etc";
background-attachment: fixed;
background-color: transparent;
padding-left: 40em;}


h1 {
font-family: "Copperplate Gothic Bold", "Tw Cen MT";} */

<style>
#leftside{
width:280 px;
height: 320 px;
top: 15%;
right: auto;
bottom: 150 px;
left: 2 em;
font-family: Georgia, "Times New Roman", Times;
overflow:hidden;
position: fixed;
}

#imagesection{
width:437px;
height:317px;
top: 15%;
right: 0;
left: 15em;
bottom: 150 px;
border:none;
position: fixed;
background: url(newmbb_datafiles/sites_etc.png);
}

</style>
-------------------------------------------
XHTML CODE
-------------------------------------------
<body>
<body id="home">

<div id="navbar">
<ul><li><a href="#" class="current">home</a></li> <li><a href="#">about</a></li> <li><a href="#">advertising</a></li> <li><a href="#">marketing</a></li> <li><a href="#">resource center</a></li> <li><a href="#">contact</a></li>
</ul>
</div>


<div id="leftside">
<h3>Build Roads</h3><br>
<h3>Generate Traffic</h3><br>
<h3>Convey the Message</h3><br>
<h3>Win the Customer</h3><br>
</div>
<div id="imagesection">
</div>
----------------------------------------------
I have two other problems:

1) Even though I saved a .PNG file as transparent, it is inheriting the background color from the navbar. I put background-color: transparent in one of my earlier CSS revisions but it didn't make it transparent. ANY IDEAS?

2)Mozilla Firefox & Netscape do not read my CSS file even though I added the full "C://" address. ANY IDEAS?

 

[vacunita]

First: if you already have a style block with the rest of the css, you can remove the style tags around my part of the code.

Second: why do you have two body tags in your html?

Third: Did you not see what i posted??? divs are block level elements, and such need to be floated to make them sit side by side. The float:left attribute is there for a reason.

Fourth: too much unecessary css can cause trouble. Stand back and think of what the main layout should be. and then code accordingly.



----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[sam0077]

Hi Vacunita, thank you for your reply. Your style code didn't work as it was, so I blended your advice with what I learned from Vragabond's Float tutorial.

I did not know that DIVS must be floated to make them sit side-by-side. The link that Vragabond gave me said something different (

http://www.w3.org/TR/REC-CSS2/visuren.html#floats)

- although I am sure I misunderstood the section on absolute positioning. I was trying not to go back to you with a "it didn't work" message. I eventually gave up and here I am.

In addition, I am not sure about the other points you made:

The style block you gave me is the only style block I have.

I have a body tag and a body id tag. The body id tag was to identify each page on my website - i.e., homepage, advertising, marketing etc.

I was using a lot of CSS code because it displayed incorrectly in the IE brower, the only browser that is reading my CSS file.

Could you please give me just a little more advice so that I can work on my own?

THANK YOU!!

 

[Vragabond]

1. What vacunita meant by the style blocks was this. You use style blocks in your html document to add css stylesheet. You [!]DO NOT put any html tags[/!] (like a <style> in the actual stylesheet. That means if you have a separate stylesheet, there is no html in it. FF will stop reading the stylesheet as soon as it will reach the html tag in it. Make sure that your stylesheet only has valid styles, delimited by semi-colons, surrounded by curly braces and having comments like these /* comment */. If there is anything else in your stylesheet, your stylesheet will not work!

2. There is no body id tag. There is a body tag. There is an id attribute. Every HTML document can only have one body tag. You have two. One with no attributes, one with the id attribute. If you need the attribute, then drop the first body tag. If you do not need the attribute, then you can drop the second one.

3. Step back and solve things, don't complicate them. If your CSS is not working cross-browser, you have a problem in it. Do not make it more complex until you get it to work everywhere. Many times putting more complexity to the CSS, will make it behave differently across browsers.

4. You have a <br /> element after the <h3> headings. This is completely useless since <h3> is a block level element and will have a line break of its own. If you want a bigger brake, give it a bigger margin.

5. Do you have a valid doctype on your page? If not, you should put one.

6. You should only read the Floats section in that document, not about Absolute positioning, if absolute positioning is of no interest to you.

7. I do however want you to read every HTML and CSS tutorial on the htmldog website. Your understanding of html and css leaves a lot for improvement.

 

[vacunita]

Thnx Vrag, for taking the time to explain what I meant.

About the <br> tags that's my bad, I put them there in my example by mistake.

As for the rest of Vrag's observations, sam0077 I suggest you listen to them. Read the part about floats. And try to get the section to work by itself. Once it works on its own. You can then combine it with the other sections of your page.

I also suggest you make a mock up of what you want your website to look like, and the work with the divs and style sheets to achieve that. Once it looks o.k. to you, you can start adding content.

I would also recommend reading html tutorials to get th basic understanding. As Vrag, explained only one body tag is allowed. the Id must go inside the same body tag. not a separate one.






----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[sam0077]

Thank you for your help, both of you.

A question: When going back to Vacunita's example, it has <style> tags in the style sheet. Should I take this out?

Both the #leftside and #imagesection float left?

Thank you again for your help.

 

[vacunita]

When going back to Vacunita's example, it has <style> tags in the style sheet. Should I take this out?

If you are putting it inside a separate style sheet file, or already have a defined style block within the page then yes.

Both the #leftside and #imagesection float left?

Yes since divs are block style elements they naturally have a line break after them. if you want them to sit side by side you need to float them both so the line breaks are removed.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[sam0077]

Thank you for the explanation Vacunita. In your side-by-side example, how do you deal with the background position setting? I used margin:top and margin:left to place the image where it needed to be. Should I have used background-position instead?

I noticed that the image wraps if the Netscape window, for example, is not opened to full size.

This is my last question. Thank you again.

 

[vacunita]

I'm not sure I understand the part about the background.

As for the wrapping behaviour, that is standard and expected behaviour. If you want to avoid that you could wrap the nav bar and the image in another DIV and give it a static width that fits both sections. That way the wrapping div keeps its width when the browser is resized. And maintains the image in its pace.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[sam0077]

Thank you Vacunita for your feedback. I am not sure I can even explain the problem correctly, but here goes...

The menu bar is static on the screen - it does not move even when the browser is resized. But the background does move when the browser is resized. So - based on the screen size at that moment, the menu bar is above the background image or below the background image. It appears to be the background image that changes, and not the menu bar.

The background-position is :fixed, and the width for the body and the div wrapper (which may be redundant) is 760px.

What am I missing? Thank you in advance for your feedback.

 

[sam0077]

Vacunita, Never Mind - I FIXED IT!!

Thanks anyway.