Help
Hi all,
I've designed a site using css but when I change the size of the browser window it moves everything out of position.
Can anyone tell me how I can prevent this from happening? It's a 2 column liquid layout. I can post the code when I get home tonight if that would help.
Cheers....Rich
Page 1 of 1
CSS question
#3
Rich W 
- Forum Newcomer
-
- Group: Members
- Posts: 19
- Joined: 02-March 09
- Reputation: 0
- Gender:Male
- Location:Brum
- Experience:Beginner
- Area of Expertise:I'm Learning
Posted 07 April 2009 - 06:30 PM
Cool, see the attachment....
Attached File(s)
-
liquid.css (1.51K)
Number of downloads: 7
#5
rosiesp
- Advanced Member
-
- Group: Members
- Posts: 290
- Joined: 17-November 08
- Reputation: 1
- Gender:Male
- Location:lundn
- Experience:Intermediate
- Area of Expertise:Web Designer
Posted 07 April 2009 - 06:41 PM
Hi,
try changing:
to:
you may need to tweak the percentages to take account of the padding. At the moment the widths are in px and so won't resize with the window
try changing:
#rightnav
{
float: right;
width: 400px;/* floats the right nav to the right and sets the width */
margin: 0;
padding: 1em; /* moves the text away from the edges of the div */
}
#content
{
margin-right: 400px;
padding: 1.5em;
}to:
#rightnav
{
float: right;
width: 48%;/* floats the right nav to the right and sets the width */
margin: 0;
padding: 1em; /* moves the text away from the edges of the div */
}
#content
{
margin-right: 46%;
padding: 1.5em;
}you may need to tweak the percentages to take account of the padding. At the moment the widths are in px and so won't resize with the window
#6
Rich W
- Forum Newcomer
-
- Group: Members
- Posts: 19
- Joined: 02-March 09
- Reputation: 0
- Gender:Male
- Location:Brum
- Experience:Beginner
- Area of Expertise:I'm Learning
Posted 07 April 2009 - 06:41 PM
Sorry quite new to this lol....
Attached File(s)
-
2_column_liquid_layout.html (1.05K)
Number of downloads: 5
#9
rosiesp
- Advanced Member
-
- Group: Members
- Posts: 290
- Joined: 17-November 08
- Reputation: 1
- Gender:Male
- Location:lundn
- Experience:Intermediate
- Area of Expertise:Web Designer
Posted 07 April 2009 - 06:46 PM
Rich W, on Apr 7 2009, 19:44, said:
Cheers rosiesp, I'll give that a try.
try this html. I fiixed it and made it valid (xhtml strict).
Attached File(s)
-
2_column_liquid_layout.html (1.16K)
Number of downloads: 9
#10
Rich W
- Forum Newcomer
-
- Group: Members
- Posts: 19
- Joined: 02-March 09
- Reputation: 0
- Gender:Male
- Location:Brum
- Experience:Beginner
- Area of Expertise:I'm Learning
Posted 07 April 2009 - 07:18 PM
rosiesp, on Apr 7 2009, 19:46, said:
try this html. I fiixed it and made it valid (xhtml strict).
Works perfectly, how did you do it? what's xhtml strict?
Cheers for all your help.
#11
rosiesp
- Advanced Member
-
- Group: Members
- Posts: 290
- Joined: 17-November 08
- Reputation: 1
- Gender:Male
- Location:lundn
- Experience:Intermediate
- Area of Expertise:Web Designer
Posted 07 April 2009 - 07:29 PM
Rich W, on Apr 7 2009, 20:18, said:
Works perfectly, how did you do it? what's xhtml strict?
Cheers for all your help.
Cheers for all your help.
html comes in four main variants, one of which is xhtml strict. see w3c schools.
to see what I did just open up both versions of the html file and see the differences
#12
EX-Ian
- Forum Newcomer
-
- Group: Members
- Posts: 4
- Joined: 06-April 09
- Reputation: 0
- Experience:Beginner
- Area of Expertise:Designer/Coder
Posted 08 April 2009 - 05:15 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
this code is to center your css that's what I know ^^
dont forget to put this code in your html ^^
yeah w3school is good..
this code is to center your css that's what I know ^^
dont forget to put this code in your html ^^
yeah w3school is good..
#13
dangreaves92
- Advanced Member
-
- Group: Members
- Posts: 376
- Joined: 25-September 08
- Reputation: 2
- Gender:Male
- Location:Essex, UK
- Experience:Intermediate
- Area of Expertise:Designer/Coder
Posted 08 April 2009 - 07:40 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
That doesn't center your CSS. That line basically instructs your browser that the following code is written in XHTML Strict. Basically, each "type" of HTML has slightly different rules and ways in which it is displayed. The language is the same, just with slight differences. If possible, you should always use XHTML Strict as it forces you to write clean, well formatted code.
- ← IE6 - Png Transparency working but links stop
- CSS, XHTML/HTML & JavaScript
- IE 6 - big problem with some boxes... HELP! →
Share this topic:
Page 1 of 1