text out frames en relative probleem

[Nikohw]

beste....

ik heb 2 probleempje wat betreft css.
ik probeer een pagina te maken met de volgende css code:

body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #E2FFDF;
	margin: 0;
	padding: 0;
	text-align: center; 
	color: #000000;
}

.site #container { 
	position: relative; 
	width: 780px;  
	height: 700px;
	background: #EFFFFF;
	margin: 0 auto; 
	border: 1px solid #000000;
	text-align: left;
} 

.site #menu {
	position: relative;
	width: 780px;
	height: 22px;
	left: 0px;
	top: 70px;
}

.site #space {
	position: relative;
	width: 780px;            !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! ALS IK DEZE BREDER MAAK, WORDT DE CONTAINER OOK BREDER... HIJ KAN NIET ABSOLUTE WORDEN GEMAAKT!
	left: -1px;                  !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! DIT EFFECT PROBEER IK OOK AAN DE RECHTERKANT TE BEREIKEN....
	height: 22px;
	top: 75px;
	border-top-style: solid;
	border-top-width: 1px;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	background-color: #E2FFDF;
}

.site #main { 
	position: absolute;
	left: 20px;
	width: 740px;
	height: 600px;
	top: 155px;
	text-align: left;
}

!! SPACE, MENU EN MAIN BEVINDEN ZICH -IN- DE DIV TAGS VAN DE CONTAINER !!

nu is het probleem dat als ik in (het zogenaamde tekstveld #main mijn tekst wil typen, en er ik type bijvoorbeeld:
dsgaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaagdsdgsgdgsdsdg (dit is veel breder dan de 740px) dat de main automatisch breder wordt... kan ik ervoor zorgen dat de main niet breder wordt, maar dat de tekst gewoon op de volgende regel verdergaat?



het volgende probleempje is dat als ik de breedte van #space aanpas, (omdat ik de borders van de container op een paar plekken wil verwijderen) dat de breedte van de hele container ook breder wordt... kan ik dit ergens veranderen? ik kan container namelijk niet op absolute zetten :S

alvast bedankt voor eventuele antwoorden.

 

[ErikBooy007]

Eerste probleem, is zo denk ik geen oplossing voor. De browser weet bij zo'n "woord" niet waar de tekst afgebroken moet worden. Je kunt het element wel overflow: hidden; meegeven. Dan wordt het gewoon niet weergegeven.

Same story voor je tweede probleem. Geef je container een vast breedte (heeft ie al zie ik) en zet de overflow op hidden. Denk dat dat het wel moet doen.

 

[Nikohw]

hmm bij de eerste werkt het, thnx

maar bij mijn 2e probleem niet... de overflow moet juist 1 px worden namelijk... als ik overflow: hidden; gebruik, dan werkt de overflow helemaal niet...

left -1px; doet het wel (als ik geen overflow: hidden; gebruik) alleen als ik hem aan de rechterkant 1 pixel wil laten overflowen dan wordt de container automatisch breder... kan ik niet zoiets gebruiken als right -1? (right -1 zelf werkt niet, maar miss is er een ander commando voor?)

iemand nog een idee voor het #space probleem?

 

[ErikBooy007]

Ah, nu snap ik het geloof ik. Je wilt een div maken, die over de borders van de container heenvalt, zodat je de border niet ziet.

Even kijken, heb je inderdaad geen probleem aan één kant. Je zou het met 2 div's kunnen doen.

Dan gebruik je op de ene div

float: left;
left: -1px;

en voor de andere:

float: right;
left: 1px;

En dan hoef je ze in principe maar 1 pixel breed te maken.

 

[Nikohw]

haha ja dat is precies wat ik wil doen, maar ik wil het eigenlijk met ie spacebar doen omdat de kleur van de bar, anders is dan die van de zgn header en main...

 

[ErikBooy007]

Oké, daar snap ik helemaal geen hol van. Kun je even wat online zetten, zodat we kunnen zien wat je bedoelt?

 

[Nikohw]

okee het is wel ongeveer wat ik wil, maar hoe krijg ik die
float: right;
left: 1px;
NAAST de spacebar?

ik probeer deze pagina: www.3747.eu na te maken... op deze pagina is ook een space bar gebruikt om een geheel van elkaar te scheiden en het zo te laten lijken dat het 2 blokken zijn... maar bij mij wil het rechter borderlijntje niet weg gaan...

 

[ErikBooy007]

Wat bedoel je met een spacebar, nogmaals dit soort dingen uitleggen werkt vaak niet zo goed. Zet het dan even ergens online.

 

[Nikohw]

met de spacebar bedoel ik #space. moment ik zet het online

 

[ErikBooy007]

Nou ja, dan niet.

Probeer de #space eens 1px breed te maken en float: left; mee te geven. Als je dan de andere right float en 1 px naar rechts schuift, moet dat wel lukken.

 

[Nikohw]

http://i25.tinypic.com/xnal5i.png

dat is wat ik nu heb...

erik ik snap wat je bedoelt... maar hoe krijg ik een div naast een andere?
als ik die 2 divs maak, #space, en ik probeer er eentje naast te zetten, komt ie op de volgende regel...

 

[Nikohw]

ik heb geen host, maar om te zien wat ik heb kan je deze code

<html>
<head>
<title>Rondleiding</title>
<link rel='stylesheet' type='text/css' href='style.css' media='screen'> 
</head>

<body class="site">

<!-- alle divs aanroepen -->
<div id="container">
<div id="menu"><p style="text-align: center">&nbsp;<a href="index.html"><img border="0" id="img14" src="homepic.gif" height="20" width="100" alt="Home"></a><a href="entree.html"><img border="0" id="img8" src="entreepic.gif" height="20" width="100" alt="Entreehal"></a><a href="etage0.html"><img border="0" id="img9" src="etage0pic.gif" height="20" width="100" alt="Etage 0"></a><a href="etage1.html"><img border="0" id="img10" src="etage1pic.gif" height="20" width="100" alt="Etage 1"></a><a href="faciliteiten.html"><img border="0" id="img12" src="faciliteitenpic.gif" height="20" width="100" alt="Faciliteiten"></a><a href="contact.html"><img border="0" id="img13" src="contactpic.gif" height="20" width="100" alt="Contact" ></a></div>
<div id="space"></div>
<div id="main">sdggddggddggddggddggddggddggddggddggddggddggddggddggddggddggddggdssss</div>
</div>
<!-- einde van de divs -->

    


    
</body>
</html>

samen met de css code hierboven runnen

 

[ErikBooy007]

Als dat het is, snap ik niet dat je zo moeilijk doet.

Wat dacht je ervan om van de header met de links een element te maken (daar geef je dan de borders in aan. En van de rest van de content een element. Dan geef je het menu gewoon een margin-bottom van 22px.

Hiervoor hoef je echt niet moeilijk te doen met posities en dergelijke. De container geef je dan gewoon geen border.

 

[Nikohw]

okee klopt, je hebt gelijkt, ik heb nu 2 blokken gemaakt, een header en een main... thanks voor de hulp en sorry voor de onduidelijkheden.

nog een vraagje: kan je misschien nog een soort aanpassing maken, dat als je pagina in ie wordt geopend dat hij het ene doet, en als ie in firefox wordt geopend het andere... want in firefox is me menu op een of andere manier een stuk lager dan in ie?

 

[ErikBooy007]

Ja, je kunt aparte stylesheets opgeven voor IE (zoek hier op het forum even naar Conditional Comments, csshunter heeft er laatst een stuk over geschreven).

Maar meestal is het opgelost door bovenaan je pagina even dit te zetten ( in je css ):

* {

  margin: 0px;
  padding: 0px;

}

En dan per element specifiek de margin en padding aan te geven. Anders bepalen de browsers namelijk zelf wat de margin / padding is.

[EDIT]
En je hoeft je niet te verontschuldigen voor de onduidelijkheden hoor
[/EDIT]

 

[Nikohw]

okee, geweldig. hij doet het prima nu...

heel erg bedankt