TalkPHP
Home Forums Articles Glossary Awards Register Rules Members Search Today's Posts Mark Forums Read
 
 
 
Account Login
Latest Articles
» The basic usage of PHPTAL, a XML/XHTML template library for PHP
by awuehr on 11-10-2008 in Tips & Tricks
» Vulnerable methods and the areas they are commonly trusted in.
by Village Idiot on 11-04-2008 in Classes & Objects
» Simple way to protect a form from bot
by codefreek on 10-23-2008 in Basic
» The Basics On: How Session Stealing Works
by wiifanatic on 09-12-2008 in Security & Permissions
» How to keep your forms from double posting data
by drewbee on 07-03-2008 in Tips & Tricks
IRC Channel
IRC Speech Bubble Join the friendly bunch on IRC...
(#TalkPHP on Freenode)

...Also available via a web interface.

See this thread for information on the TalkPHP Free Hugs Initiative™. Subject to availability.
Associates
Associates
CSS Tutorials
TalkPHP > Misc. Support & Development > XHTML, HTML, CSS » Some css problems..
Reply
 
LinkBack Thread Tools Search this Thread Display Modes
Old 04-09-2008, 03:30 PM   #1 (permalink)
The Prestige
Upcoming Programmer Inquisitive 
 
Tanax's Avatar
 
Join Date: Sep 2007
Location: Sweden, Stockholm
Posts: 1,080
Thanks: 115
Tanax is on a distinguished road
Default Some css problems..
Hey!

I have this:
Untitled Document


HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<link href="includes/gfx/poems.css" rel="stylesheet" type="text/css" />

</head>
<body>
<div id="content">
	<div class="poemContent">
		
		<div class="poemContentPoem">
			GGGGGGGGGGGGGGGGGGGGGGGGGGGG<br />

GGGGGGGGGGGGGGGGGGGGGGGGGGGG<br />
GGGGGGGGGGGGGGGGGGGGGGGGGGGG<br />
GGGGGGGGGGGGGGGGGGGGGGGGGGGG<br />
GGGGGGGGGGGGGGGGGGGGGGGGGGGG<br />
GGGGGGGGGGGGGGGGGGGGGGGGGGGG<br />
GGGGGGGGGGGGGGGGGGGGGGGGGGGG<br />
GGGGGGGGGGGGGGGGGGGGGGGGGGGG<br />
GGGGGGGGGGGGGGGGGGGGGGGGGGGG<br />
GGGGGGGGGGGGGGGGGGGGGGGGGGGG<br />

GGGGGGGGGGGGGGGGGGGGGGGGGGGG<br />
		</div>
		
		<div class="poemContentTitle">
			<h1>Best mom</h1>
			<strong>To : Mom</strong>
		</div>
	
		<div class="poemContentDesc">
			<h2>Description:</h2>

			Wrote this just now
		</div>
	
</div>
</body>
</html>

And as you see, the inner right box is overlapping the outer big box, and I don't want that. I want the outer to expand together with the inner ones..

Here's the css:
Code:
.poemTitle {
	
	text-align: center;
	border-bottom: 1px solid #000;
	font-size: 20px;
	font-weight: bold;
	
}

.poemDesc {
	
	text-align: center;
	font-weight: italic;
	padding: 20px 10px;
	
}

.poemInfo {
	
	text-align: center;
	border-top: 1px solid #000;
	
}

.poem {
	
	border: 1px solid #000;
	width: 230px;
	float: left;
	margin-right: 8px;
	margin-bottom: 15px;
	
}

.poemContent {
	
	border: 1px solid #000;
	padding: 10px;
	
}

.poemContentPoem {
	
	float: right;
	text-align: left;
	width: 660px;
	border: 1px solid #000;
	padding-top: 10px;
	padding-bottom: 30px;
	padding-left: 10px;
	padding-right: 10px;
	text-align: center;
	
}

.poemContentTitle {
	
	width: 450px;
	margin: 0;
	padding: 0;
	text-align: center;
	border: 1px solid #000;
	padding-bottom: 10px;
	
}

.poemContentDesc {
	
	width: 450px;
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
	border-left: 1px solid #000;
	text-align: center;
	padding-bottom: 20px;
	
}

.poemContentDesc h2 {
	
	padding-top: 5px;
	text-decoration: underline;
	margin-top: 0;
	font-size: 15px;
	text-align: center;
	
}
THanks in advance!
__________________
Last edited by Tanax : 04-10-2008 at 01:01 PM. Reason: code added
Tanax is offline   		Reply With Quote
Old 04-09-2008, 03:59 PM   #2 (permalink)
The Acquainted
 
Gareth's Avatar
 
Join Date: Jan 2008
Posts: 136
Thanks: 4
Gareth is on a distinguished road
Default
Is it the bit just under the contact button at the top?
(And why are you using tables!?)
Gareth is offline   		Reply With Quote
Old 04-09-2008, 04:01 PM   #3 (permalink)
how quixotic are you?
 
ETbyrne's Avatar
 
Join Date: Dec 2007
Location: Lapeer, MI
Posts: 445
Thanks: 37
ETbyrne is on a distinguished road
Default
Try this: (not tested)
Code:
#content{
width: /*width of both columns combined*/;
}
__________________
Dingo Web Systems > http://www.dingocode.com
My Website > http://www.evanbot.com
ETbyrne is offline   		Reply With Quote
Old 04-09-2008, 04:06 PM   #4 (permalink)
The Prestige
Upcoming Programmer Inquisitive 
 
Tanax's Avatar
 
Join Date: Sep 2007
Location: Sweden, Stockholm
Posts: 1,080
Thanks: 115
Tanax is on a distinguished road
Default
Lol. They're doing maintence right now.. so you can't see my page

@up- won't work because some poems are longer, and some are shorter, so.. but I assume you didn't see my page, but only the maintence message.

@gar- I'm not..
__________________
Tanax is offline   		Reply With Quote
Old 04-09-2008, 04:31 PM   #5 (permalink)
The Prestige
Upcoming Programmer Inquisitive 
 
Tanax's Avatar
 
Join Date: Sep 2007
Location: Sweden, Stockholm
Posts: 1,080
Thanks: 115
Tanax is on a distinguished road
Default
Added the code here..
__________________
Tanax is offline   		Reply With Quote
Old 04-10-2008, 08:29 AM   #6 (permalink)
Jim
The Addict
 
Jim's Avatar
 
Join Date: Nov 2007
Location: the Netherlands
Posts: 281
Thanks: 2
Jim is on a distinguished road
Default
It would be handy to see it online :), since not everybody wants to c/p the code and run it localy. (Im at work)
__________________
Nunchaku! Who doesn't like martial arts? =)
Send a message via MSN to Jim Send a message via Skype™ to Jim
Jim is offline   		Reply With Quote
Old 04-10-2008, 12:42 PM   #7 (permalink)
The Contributor
 
marxx's Avatar
 
Join Date: Sep 2007
Location: Finland
Posts: 45
Thanks: 3
marxx is on a distinguished road
Default
Code:
.clr { clear: both; }
Code:
<div class="clr"></div>
And put it after inner... sorry but didn't test it but problem sound like that this should help.
Send a message via MSN to marxx
marxx is offline   		Reply With Quote
The Following User Says Thank You to marxx For This Useful Post:
Tanax (04-11-2008)
Old 04-10-2008, 01:02 PM   #8 (permalink)
The Prestige
Upcoming Programmer Inquisitive 
 
Tanax's Avatar
 
Join Date: Sep 2007
Location: Sweden, Stockholm
Posts: 1,080
Thanks: 115
Tanax is on a distinguished road
Default
Sorry. The admin check on the webserver has been completed, so you can view the site now!!!

@up- Will try it!
__________________
Tanax is offline   		Reply With Quote
Old 04-10-2008, 08:47 PM   #9 (permalink)
The Acquainted
 
Gareth's Avatar
 
Join Date: Jan 2008
Posts: 136
Thanks: 4
Gareth is on a distinguished road
Default
Tanax, as marxx said, you should clear:both.

For example;

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<style type="text/css">
.poemTitle {
	
	text-align: center;
	border-bottom: 1px solid #000;
	font-size: 20px;
	font-weight: bold;
	
}

.poemDesc {
	
	text-align: center;
	font-weight: italic;
	padding: 20px 10px;
	
}

.poemInfo {
	
	text-align: center;
	border-top: 1px solid #000;
	
}

.poem {
	
	border: 1px solid #000;
	width: 230px;
	float: left;
	margin-right: 8px;
	margin-bottom: 15px;
	
}

.poemContent {
	display: block;
	border: 1px solid #000;
	padding: 10px;
	
}

.poemContentPoem {
	
	float: right;
	text-align: left;
	width: 660px;
	border: 1px solid #000;
	padding-top: 10px;
	padding-bottom: 30px;
	padding-left: 10px;
	padding-right: 10px;
	text-align: center;
	
}

.poemContentTitle {
	
	width: 450px;
	margin: 0;
	padding: 0;
	text-align: center;
	border: 1px solid #000;
	padding-bottom: 10px;
	
}

.poemContentDesc {
	
	width: 450px;
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
	border-left: 1px solid #000;
	text-align: center;
	padding-bottom: 20px;
	
}

.poemContentDesc h2 {
	
	padding-top: 5px;
	text-decoration: underline;
	margin-top: 0;
	font-size: 15px;
	text-align: center;
	
}

.clr { 
	
	clear: both; 
	
}
</style>

</head>
<body>
	<div id="content">
		<div class="poemContent">
			
			<div class="poemContentPoem">
				For all the times you've helped me,<br />
				I can't thank you enough.<br />
				You've always been an angel,<br />
				eventhough you also had it rough.<br /><br />
				
				You're one of my best friends, if not the best,<br />
				I just hope that you the same way feel.<br />
				Because you're special, you're not like the rest,<br />
				you can really help me heal.<br /><br />
			</div>
			
			<div class="poemContentTitle">
				<h1>Best friend</h1>
				<strong>To : Karolina</strong>
			</div>
		
			<div class="poemContentDesc">
				<h2>Description:</h2>
				I wrote this to a very good friend of mine, who's always been there for me.
			</div>
			
			<div class="clr"></div>
	        
		 </div>		
	</div>
</body>
</html>
Gareth
Gareth is offline   		Reply With Quote
The Following User Says Thank You to Gareth For This Useful Post:
Tanax (04-11-2008)
Old 04-11-2008, 01:37 PM   #10 (permalink)
The Prestige
Upcoming Programmer Inquisitive 
 
Tanax's Avatar
 
Join Date: Sep 2007
Location: Sweden, Stockholm
Posts: 1,080
Thanks: 115
Tanax is on a distinguished road
Default
Worked perfectly!! Thank you

Tanaxia v1

Click read more
__________________
Tanax is offline   		Reply With Quote
Old 04-11-2008, 01:42 PM   #11 (permalink)
The Prestige
Upcoming Programmer Inquisitive 
 
Tanax's Avatar
 
Join Date: Sep 2007
Location: Sweden, Stockholm
Posts: 1,080
Thanks: 115
Tanax is on a distinguished road
Default
Actually, there's one more thing on this website.
How can I make so I can write european letters, such as "å ä ö" in the document, without having to use the html codes &uml; and whatever the others are..

I read somewhere that you could set the charset to utf-8, but it didn't work =//

I'll put up a swedish poem now, so you'll see what I mean..

Edit: gash. It removed all the åäö.. usually it's a questionmark. But anyways, how can I make it work?? ://

Edit2: It works now :O lol

Thanks
__________________
Tanax is offline   		Reply With Quote
Reply

« Previous Thread | Next Thread »


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On


All times are GMT. The time now is 07:53 AM.

 
     
Contact Us - TalkPHP - PHP Community - Archive - Top

Powered by vBulletin® Version 3.6.8
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.1.0
Inactive Reminders By Icora Web Design