Text align

Question

davy_yg 2 Posting Whiz

12 Years Ago

Cek this site: http://www.masterlink.co.id/

Cek the text which is out of order. I wonder how to keep the text in order eventhough I change the screen resolution for example to 1280 x 800 or 1024 x 768 px.

index.php

<html>
<head>
<title>Rustoleum</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css" media="screen">
</head>

<center>
<div id="container">

<div id="logo"><img src="images/logo.gif"></div>

<div id="menu"><a href="#">Pengenalan Perusahaan</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Industrial Product</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Aerosol Product</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Konsultasi Konsumen</a></div>

<img src="images/banner.gif">

<body>



<div id="sidenav"><img src="images/sidenav.jpg"></div>
</center>

<div id="sidenavtext">
<font color="green">PT. Rus-Oleum</font><br><br>
Pengenalan Perusahaan<br><br>
Sejarah Perusahaan<br><br>
Cabang<br>
</div>

<div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices enim at leo elementum rutrum. Etiam eu
 felis nulla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam feugiat porttitor
 porta. Suspendisse consectetur ligula pellentesque arcu sollicitudin varius. Pellentesque id tellus felis, vestibulum convallis 
tortor. Mauris nec lorem id mauris suscipit sagittis sit amet ut arcu. Nullam eget ipsum ac eros volutpat venenatis. 
Morbi urna erat, malesuada a vulputate a, vulputate in massa. Aliquam in nunc vitae velit consequat mollis. Quisque i
n diam nec magna blandit sodales. In et ipsum et dui ultrices mattis sit amet ac justo.


<br><br>Duis a libero et purus vestibulum dapibus. Cras vel malesuada ligula. Ut eget velit venenatis lacus consequat placerat. 
Cras adipiscing metus eu felis aliquam adipiscing. Sed in sapien non augue fringilla tincidunt. In hac habitasse platea 
dictumst. Maecenas lectus dolor, ornare eget interdum vestibulum, ornare sit amet dolor.


<br><br>Curabitur urna dolor, varius eget varius vitae, fringilla et justo. Sed gravida viverra lectus, eget commodo tellus placerat 
eu. Maecenas a sapien vitae sapien tristique consectetur at nec augue. Vestibulum scelerisque, risus et fermentum 
venenatis, magna nunc pharetra sem, sed rhoncus dui neque non velit. Curabitur posuere, nisl quis scelerisque euismod, 
enim diam sollicitudin quam, et dignissim est risus nec libero. Cum sociis natoque penatibus et magnis dis parturient
</div>

<center>
<hr width=950px;>
<div id="logo"><img src="images/logo.gif"></div>

</body>
</div>
</center>

</html>

style.css

/* CSS Document */

#container { width: 512px height:768px}

#logo { margin: 0 0 0 -700px;}

#menu { margin: 20px 0 20px 30px;}

#sidenav { z-index:0; margin: 30px 0 0 -700px;}

#sidenavtext { z-index:-1; margin: -200px 0 0 100px; font: Arial; color: blue;}

#content { width: 680px; margin: -150px 0 100px 420px;}

I have tried to place a container to keep the whole website inside a container and make sure the whole container stays in the center but it does not work. Any other idea how to fix this? If I align the content with margin then it will turn to chaos if I change the screen resolution. Earlier I tried to place the content in the center yet as a result the whole content align center not left as it suppose to be.

web-design

4 Contributors
25 Replies
208 Views
1 Week Discussion Span
Latest Post 12 Years Ago Latest Post by dany12

JorgeM 958 Problem Solver

12 Years Ago

Ok... to start you have some of your core elements out of order. For example, an HTML document should look something like this...

<html>
<head>
    <title>Your Title</title>
</head>

<body>

<!--  Your HTML Elements -->

</body>
</html>

In your example, you have elements between your head and body (#7-#16) and between your body and html (#55-#57).

First, clean the HTML structure and get report back if you need more help.

JorgeM 958 Problem Solver

12 Years Ago

I would try something like this...

<html>
<head>
    <title>Your Title</title>
</head>
<body>
<div id="outerDiv">

 <div id="innnerDiv">

 <!-- your content -->

 </div>

</div>

</body>
</html>

For the outer div, style is in this manner...

#outerDiv {width:1000px;margin:0px auto;}
#innerDiv {width:100%;height:##px}

Add your content and adjust your CSS settings for the rest of the elements.

dany12 13 Light Poster

12 Years Ago

you will have to use css media queries

JorgeM 958 Problem Solver

12 Years Ago

You can use media queries to apply different style sheets based on display size for example. I do not see the connection here for your scenario. If you are trying to align your text properly, and set the content in the middle of the page, it can be easily accomplished with the info I provided so far.

If you create an outer "wrapper" with a set width and center it, that will create your boundaries. From there create a content, inner div and go from there.

JorgeM 958 Problem Solver

12 Years Ago

What I mean by an "outer wrapper" is essentially a div that you can create to contain the rest of your HTML content. In the example I provided above...

<html>
<head>
    <title>Your Title</title>
</head>
<body>
<div id="outerDiv">
 <div id="innnerDiv">
 <!-- your content -->
 </div>
</div>
</body>
</html>

The div with an ID of "outerDiv" is my "wrapper". If I want this container to be centered horizontally and set to a specific width, i style it as follows:

#outerDiv {width:1000px;margin:0px auto;}

That's all you need to create the outer container. By the way, the link you provided takes you to another related thread, not to your web site.

Also keep in mind that CSS classes and ids are CASE SENSITIVE.

.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

davy_yg 2 Posting Whiz · Answer 1 · 2012-06-18T15:34:49+00:00

Cek my recent update: Click Here

Well, I tried using the correct structure offline yet the output is still the like online.

Try changing the screen resolution from: 1280 x 800 to 1024 x 768 the layout content turns out of place.

How to fix the layout so that it remains correctly in either resolution ?

pcandtech 0 Newbie Poster · Answer 2 · 2012-06-19T11:55:39+00:00

pcandtech 0 Newbie Poster

12 Years Ago

I have no idea of it.

davy_yg 2 Posting Whiz · Answer 3 · 2012-06-22T11:23:06+00:00

how to create the outer wrapper ? I've tried using a container, but it does not do anything. Basically I want to create a boundary, how ? Cek what I did so far: Click Here I change the screen resolution to 1024 x 768 px the text comes out of place.

davy_yg 2 Posting Whiz · Answer 4 · 2012-06-22T13:16:41+00:00

I did try it. Check this out: Click Here

On resolution 1024 x 768 px the text goes out of order. I would like it to stay in the center no matter what the resolution may be.

JorgeM 958 Problem Solver Team Colleague Featured Poster · Answer 5 · 2012-06-22T17:57:27+00:00

Ok, I dont have additional time to work through all of the issues, but maybe this much will help you get on track. What I have noticed is that you are trying to position your divs by using margins. That's not going to work too well. In addition, there are quite a bit of HTML elements that are not properly syntaxed...some missing end tags, others not properly formatted. I made quite a bit of changes to your code, just to get you to the point where you can see how the "wrapper" div works. Copy and paste this code and open with a browser..you'll notice whether you maximize or have a smaller window, the content stays in the center. The text doesnt move around.

I would also recommend that you do not use deprecated tags in your HTML document, and style all of your HTML elements in CSS rather than on the elements themselves. By no means is the code i am pasting below even close to being tidy. Again, just to get you going.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Rustoleum</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<style type="text/css">

#outerDiv {width:1000px;margin:0px auto;}
.logo { margin: 0px;}
#menu { margin: 0px; font-size:14; text-decoration:none;}
#menu a, a:hover, #menu a:link {margin-right: 25px; font: Arial; color: red; text-decoration:none;}
#sidenav { z-index:0; margin: 0px;}
#sidenav2 { z-index:0; margin: 0px;}
#sidenavtext2 { float:left;width:50%;z-index:-1; margin: 0px; font: Arial; font-size: 13px; color: black; text-decoration:none;}
#sidenavtext2 a:hover { z-index:-1; font: Arial; font-size: 13px; color:black;}
#sidenavtext2 a:link { z-index:-1; font: Arial; font-size: 13px;  color:black; text-decoration:none;}
#pic { position: absolute; margin: 0px;}
#content2 { float:right; width: 50%; margin: 0px; font: Arial; font-size: 14px;}
#content2 #title { width: 500px; margin: 0px; font: Arial; font-size: 14px; font-weight: bold; text-transform: uppercase;}
#content2-1 { float:left;width: 50%; margin: 0px; font: Arial; font-size: 14px;}
#content2-2 { float:right; width: 50%; margin: 0px; font: Arial; font-size: 14px;}
#form {margin: 0px; font-size: 14px; font-weight: normal;}
</style>
</head>
<body>

<div id="outerDiv">
<img src="images/logo.gif">
<div id="menu"><a href="index.php">Pengenalan Perusahaan</a><a href="industrial-produk.php">Industrial Product</a><a href="aerosol-produk.php">Aerosol Product</a><a href="konsultasi-konsumen.php">Konsultasi Konsumen</a></div>
<img src="images/banner.gif">
<div id="sidenav2"><img src="images/sidenav2.jpg"></div>
<div id="sidenavtext2">
<b>EPOXY</b><br />
<ol>
<li><a href="Rustoleum2-1.php">9100 SYSTEM DTM EPOXY MATIC</a>
<ul>
<li>Standard activator</li>
<li>Immersion activator</li>
<li>Low Temperature activator</li>
</ul>

</li>
<li><a href="Rustoleum2-2.php">C 9578 system Coal Tar Epoxy</a></li>
</ol>
<b>URETHANE</b>
<ol>
<li><a href="Rustoleum2-3.php">9400 System High Gloss Polyester Urethane </a></li>
<li><a href="Rustoleum2-4.php">4200 / 4300 System High Heat Coatings </a></li>
<li><a href="Rustoleum2-5.php">1500 System Speed - Dry Alkyd </a></li>
<li><a href="Rustoleum2-6.php">7000 System Cold Galvanizing Compaund </a></li>
<li><a href="Rustoleum2-7.php">Glowmax Aerosol </a></li>
<li><a href="Rustoleum2-8.php">Epoxy - Floor Coating </a></li>
</ol>
</div>
<div id="pic"><img alt="pic1" src="#"/></div>
<div id="content2">
<div id="title">9100 SYSTEM & V9100 SYSTEM DTM EPOXY MASTIC</div><br /><br />
Versatile epoxy system is perfect for Direct-To-Metal (DTM), direct-to-tightly
adhered rust, concrete floors, pools and more.  A high solids, next generation
polyamine converted epoxy.<br /><br />
*  Minimizes prep - Apply Direct-To-Metal and tightly adhered rust<br /><br />
*  Self-priming, single coat provides service life equal to multiple coats of <br />
competitive epoxy<br /><br />
*  Maximum corrosion protection<br /><br />
*  Superior long-term solvent, chemical and abrasion resistence<br /><br />
*  Outstanding impact resistence<br /><br />
*  Convenient 1:1 mixing ratio of base and activator<br /><br />
*  Versatile base formula - Works with all activators (Standard, Immersion, Low 
Temp or Fast Cure) at VOC < 340 g/l or < 250 g/l<br /><br />
* USDA acceptable* and Agriculture Canada** approved<br /><br />
</div>
<div style="clear:both;"></div>
<div id="content2-1"><b>STANDARD ACTIVATOR</b><br /><br />
* For air and surface temperature of 50 - 100 F (10-38 C)<br /><br />
<b>IMMERSION ACTIVATOR</b><br /><br />
* For fresh or salt water immersion of steel or concrete where <br /> 
   water temperature do not exceed 125 F (52 C) <br /><br />
   * Great for use in floor coating applications <br /><br />
   * Produces slightly lower gloss than standard activator <br /><br />
   * Not for use in potable water tanks <br /><br />
   </div>
<div id="content2-2">
<b>LOW TEMPERATURE ACTIVATOR </b><br /><br />

* For air and surface temperatures of 40 - 60 F <br />
  (5 - 15 C) <br /><br />

  <b>FAST CURE ACTIVATOR </b><br /><br />
  * Faster cure to minimize downtime <br /><br />
  * Recoat in 4 hors at 70 F (21 C) and 50% RH <br /><br />
  * For air and surface temperature of 50-100 F <br />
   (10-38 C)<br /><br />
   * Produces slightly lower gloss than standard <br />
      activator <br /><br />
      </div>
<hr width="950px"/>
<img alt="logo" src="#"/>
</div>
</body>
</html>

I hope it helps. Without having the images and understanding how you want this to look, it is challenging for me to be of the best assistance possible. In addition, i am short on time at the moment.

davy_yg 2 Posting Whiz · Answer 6 · 2012-06-23T05:46:01+00:00

ok, the side navigation text needs to be higher overlapping the side navigation (sidenav2.jpg) background. and the content also needs to fill in the top blank spaces (there are lots of blank spaces now on top of the content).

besides that, the centering is good enough.

davy_yg 2 Posting Whiz · Answer 7 · 2012-06-23T13:20:48+00:00

This is the newest update: Click Here

I still wonder why I cannot see the text navigation (underneath the sidenav box)?

dany12 13 Light Poster · Answer 8 · 2012-06-24T18:47:12+00:00

You want your text to be in the sidebar or you want your text under the banner?

davy_yg 2 Posting Whiz · Answer 9 · 2012-06-25T08:08:47+00:00

I want to the navigation text in the sidebar.

dany12 13 Light Poster · Answer 10 · 2012-06-25T09:09:00+00:00

You will have to change you menu idea that is bad html

<div id="nav">
<ul id="menu">

<li><a href="adress">Linkname</a></li>

</ul>

Make this update and show me what you got

davy_yg 2 Posting Whiz · Answer 11 · 2012-06-27T09:12:00+00:00

The thing is I need the side menu background image for background:

<div id="sidenav2"><img src="images/sidenav2.jpg"></div>
    <div id="sidenavtext2">

I only wonder why the background on top (I cannot see the text) of the text instead of under it.

Click Here

dany12 13 Light Poster · Answer 12 · 2012-06-27T12:05:48+00:00

I see only the menu image and the rest of the images are not there because you probably made a mistake in the path to them

<div id="sidenav2"><img src="/images/sidenav2.jpg"></div>

CAn you show me the psd so I can nderstand what are you trying to do?

dany12 13 Light Poster · Answer 13 · 2012-06-27T12:54:07+00:00

dany12 13 Light Poster

12 Years Ago

#sidenav2{margin-left:-100px;}

dany12 13 Light Poster · Answer 14 · 2012-06-27T12:56:07+00:00

sorry I thnik you have mistakes in html an in your css if you want I can help you redesign your code

davy_yg 2 Posting Whiz · Answer 15 · 2012-06-27T16:33:21+00:00

what mistakes that I did in my css and html?

here is my design jpg: Layout Design

I also have restore this part of my website to my earlier state: Rustoleum2

The only problem is the content in most of my Masterlink website. I am using margin in the css.

The style sheet: Style Sheet

dany12 13 Light Poster · Answer 16 · 2012-06-27T22:06:41+00:00

You will have to use css reset(meyer you will find it with google) and I don't think that you need z-index here you are having a frame that can be very easily made with css in html the menu is always like this <ul><li><a href="link">Text for link</a></li></ul>
HAve you tried to validate your html and css to w3school?

davy_yg 2 Posting Whiz · Answer 17 · 2012-06-28T08:49:18+00:00

I don't understand the validation result: validator

The only problem that I am having is: the content goes out of the layout whenever I change the resolution. It only looks good on 1280 x 800 px.

I thought I define a container and set the container to stay in the center everything else must follow wherever the container moves. The fact is the content does not follow the container. I wonder why?

dany12 13 Light Poster · Answer 18 · 2012-06-28T12:50:49+00:00

Post your errors here I can't see them at the adrress you provided and the <center> is deprecated.

davy_yg 2 Posting Whiz · Answer 19 · 2012-06-28T15:21:11+00:00

there is no error. The layout just does not look right. If it looks right on yours, try changing the screen resolution.

dany12 13 Light Poster · Answer 20 · 2012-06-28T19:19:35+00:00

for that you will have to use css queries or other like to call it responsive design