tekst positionen vanuit midden

Status
Niet open voor verdere reacties.
ecross

ecross

Gebruiker
Lid geworden
4 mrt 2009
Berichten
638
hallo allemaal,

ik ben van plan een pagina te maken met een wereld bol en dan er om heen tekst, om even het plaatje te krijgen:
attachment.php

en nu wil ik dat de tekst een bepaal aantal px vanuit het midden van de wereld bol staan en niet vanaf bijvoorbeeld de linkerkant zoudat het altijd goed bij elkaar blijft staan ook als je gaat inzomen enzovoorts.
alleen doe je dat? (ik ben zelf niet zo goed in css).
 

Bijlagen

  • wereldbol.GIF
    wereldbol.GIF
    3 KB · Weergaven: 32
Om een tekst te centreren kun je margin: auto; gebruiken. Vervolgens kun je een padding-left of padding-right opgeven om deze een stukje van het midden af te houden.
Een nadeel hiervan is wel dat je wel een width aan je element moet geven om margin: auto; te laten werken.
 
zoals ik al zei: ik ben niet zo goed in css
oke maak daar maar van ik ben niet goed in css.
kun je een voorbeeldje geven?
 
Met margin: auto gaat niet lukken. Dan zou je elke regel tekst in een eigen div of zo moeten zetten. Maar zodra je dan de lettergrootte verandert, gaat dat gigantisch mis, want dan houd je ruimte over of de tekst past niet meer in de div (of p of wat dan ook).

Volgens mij kan dit gewoon niet met alleen html en css. Ik heb ooit iets met 'n ronde afbeelding gemaakt die aan de linkerkant staat: http://css-voorbeelden.nl/tekst/illustraties/tekst-043.html
Dat is al behoorlijk veel werk. Maar 't kan, omdat je als het ware 'n houvast hebt aan de linkerkant van het venster. Ik heb ooit ook 'ns ergens 'n voorbeeld gezien van twee kolommen met 'n vierkante of rechthoekige afbeelding die gedeeltelijk in beide kolommen stond, tussen de kolommen in. Ook dat was al heel ingewikkeld.
Maar 'n ronde afbeelding in het midden die ook nog goed blijft staan bij zoomen en zo? Volgens mij kan dat gewoon niet. Misschien met JavaScript, dat zou ik niet weten.
 
Laatst bewerkt:
1.
Ja, als het doorlopende tekst rond de wereldbol zou moeten worden, is het een zware dobber (of onmogelijk).

2.
Maar als de blabla'tjes afzonderlijke containers zijn met niet al te veel tekst (bv. een link naar een vervolgpagina), dan is het wel goed mogelijk. Dan is het een kwestie van goed positioneren van de <div>'jes waar de blablaadjes in staan. Zolang ze elkaar niet gaan overlappen in de hoogte, is er dan niets aan de hand.
  • De blabla'tjes aan de linkerkant laat je dan rechts uitlijnen. Dan gaat de groei bij vergroting naar links, van de wereldbol af. Ook bij krimp bij verkleining blijft het rechter-uiteind op dezelfde afstand van de bol.
  • De blabla'tjes aan de rechterkant van de wereldbol gaan automatisch goed.
Uit je tekeningetje kan ik niet goed opmaken of het nu (1) of (2) is, maar ik heb de indruk dat het om losse bla'tjes gaat. Klopt dat?

Met vriendelijke groet,
CSShunter
 
Bij (2) bijvoorbeeld:
Tenminste als de site 't doet (net nog wel): server van m'n host is alweer gehackt. :mad: Ze zijn waarschijnlijk bezig met reparatie, en site is soms tijdelijk uit de lucht. Anders later nog eens proberen svp!
 
Je begint je css met:
html, body{
width 100%;
height: 100%
}
Voor de div van je wereldbol zet je als de hoogte en breedte bv 500px is het volgende
#wereldbol{
position:absolute;
left:50%;
top:50%;
margin-left:-250px;
margin-top:-250px;
}
nu staat je wereldbol precies in het midden van je pagina.
Vervolgens maak je voor elk menuitem een div.
bv.
#item1{
position:absolute;
left:50%;
top:50%;
margin-lef:-400px;
margin-top:-200px;
}
de negatieve margin van de menuitems moet je even proefondervindelijk vaststellen maar je begind dan altijd vanuit het midden van je oagina en kunt alle divs exact positioneren.
uiteraard voor de rechterkant van de bol neem je positieve waarden voor de margins.
succes
 
@css hunter: het is dus optie 2 (losse menu link'jes)
@che:
ik heb nu dit:
HTML: 
<html>
<head>
<style>
html, body{
width 100%;
height: 100%
}
#wereldbol{
background-image:url('http://********/rond.GIF');
position:absolute;
width: 500px;
height: 500px;
left:50%;
top:50%;
margin-left:-250px;
margin-top:-250px;
}
#item1{
position:absolute;
left:50%;
top:50%;
margin-left:-400px;
margin-top:-200px;
}
</style>
</head>
<body>
<div id='wereldbol'></div>
<div id='item1'>item1 dit is een erg groote link maar ja het moet maar</div>
</body>
</html>
maar nu loopt de tekst als nog over de wereld bol,
hoe los ik dit dan op?
 
Laatst bewerkt:
Ik ging - waarom weet ik ook niet - uit van 'n lange doorlopende tekst. Da's 't leuke van 'n forum, komt er 'n ander zonder blinde vlek.
Korte tekstjes kan dus prima. Ik zou even naar die pagina van csshunter kijken, die is verbluffend van eenvoud. En 't werkt ook met 'n hele lange link, met zoomen en met andere lettergrootte in Opera, IE 6, Google Chrome en Firefox, dus dan kun je aannemen dat 't in elke browser wel zal werken.
't Probleem met de code die je nu hebt is dat de tekst bij 'n langere link inderdaad over de afbeelding komt te staan.

<offtopic>csshunter, is er iets van 'n index of menu of andere ingang naar jouw site? Volgens mij staan daar heel veel dingen op waar ik graag naar zou linken.</offtopic>

Edit: wat ik nog vergeet: eigenlijk mag je maar 1 <h1> op 'n pagina gebruiken. In die code van csshunter is dat meermalen gebruikt. Waarschijnlijk om snel even vet en zo te krijgen. Dat zou ik dus even veranderen en de <h1> reserveren voor de belangrijkste kop op de pagina.
 
Laatst bewerkt:
de pagina van csshunter doet het bij mij nu niet ik krijg:
De wachttijd voor de verbinding is verstreken.
zou je de code kunnen posten of ergens anders online zetten?
 
De hoster van csshunter schijnt problemen te hebben met 'n kraker. Ik had 'm gelukkig nog in de geschiedenis. Eerlijk gejat van csshunter (ik heb 'n alleen wat achter elkaar gezet, omdat 't anders heel lang wordt voor 't forum):

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>kwik-kwek-kwak</title>
<style type="text/css">
body {margin: 0; padding: 0;}
img {border: 0;}
h1 {margin: 0; padding:0; 	font-family: "Trebuchet MS", trebuchet, arial, helvetica, sans-serif; font-size: 1.5em;}
#bol {margin-top: 60px; text-align: center;}
#kwik {position: absolute; top: 80px; width: 50%;}
#kwik h1 {margin-right: 135px; text-align: right;}
#kwek {position: absolute; 	top: 130px; right: 0; width: 50%;}
#kwek h1 {margin-left: 165px;}
#kwak {position: absolute; 	top: 280px; width: 50%;}
#kwak h1 {margin-right: 165px; text-align: right;}
</style>
</head>

<body>
<div id="bol">
	<img src="images/kwik-kwek-kwak-bol.gif" width="300" height="300" alt="">
</div>
<div id="kwik"><h1>KWIK</h1></div>
<div id="kwek"><h1>KWEK</h1></div>
<div id="kwak"><h1>KWAK</h1></div>
</body>
</html>
 
@ecross:
Wat vind je ervan?

@Goeroeboeroe <offtopic>:
Eh, neu: behalve deze http://home.tiscali.nl/developerscorner/ heb ik geen index. Nattigheid 1 is, dat ik na een fenomenale crash (Windows, u weet wel) m'n inlogcode voor die site ben kwijtgeraakt, en ik er nog altijd eens achteraan moet bij tiscali. :o
Nattigheid 2 is, dat ik er daar en op m'n nieuwe eigen site best veel achter heb hangen, maar dat is nogal rijp en groen. Bij tiscali zit bv. een directory http://home.tiscali.nl/developerscorner/css-discuss/, waar ik van alles en nog wat in heb zitten uit de tijd dat ik in dat e-mail forum actief was. Voor een aantal voorbeelden heb ik daarbij <base href="..."> gebruikt om snel een suggestie/testpagina te kunnen geven. Als er iets op de oorspronkelijke site is veranderd (en na een paar jaar is dat al snel het geval), werkt het niet meer. Moet ik nog altijd eens saneren. :rolleyes:
Dat houdt verband met nattigheid 3: de voorbeeldjes zijn vaak zonder inleiding/context niet goed te vatten, en ik wil ze nog eens netjes ombouwen tot meer universele dingen met kop & staart (en ook ontdoen van flarden van sites die er weinig mee te maken hebben, ook voor de privacy daarvan). Dan kan ik ze ook beter rubriceren.
En dan natuurlijk nattigheid 4: in mijn arrogantie denk ik dat een aantal oplossingen/tips/artikeltjes ook internationaal van belang kunnen zijn *). D.w.z.: voertaal EN ipv NL. De meeste pagina's moet ik nog tweetalig maken (cq uit EN terugvertalen naar NL, want in het webwezen denk ik vnl. in het EN). Maar de helpmij-voorbeelden moet ik juist weer naar EN omzetten.
Nattigheid 5: ik wil alles tot een mooie liquid layout omvormen.
En alles resulteert in nattigheid 6: ik ga nat op tijd-tekort. ;)

Zo, dat was nog eens een lange offtopic. Hopen dat de mods niet op het woord offtopic google'en! :D
Maar mijn voorbeeldje had ik al gegeven. Is dat wat je bedoelt, ecross?

Met groeten van
CSShunter

*) Van het universele transparante "Liquid round corners" model zwerven er maar weinig op internet rond. Alleen Roger Johansson van 456bereastreet had hetzelfde een tijdje eerder bedacht en er was een artikel over in A List Apart (maar dat wist ik toen niet); en tot mijn blijdschap trof ik deze methode ook aan in css-voorbeelden.nl!
Er zijn nog een paar epigonen, maar verreweg de meeste tutorials over ronde hoekjes gaan wel ergens mank (òf geen transparantie mogelijk, òf geen flexibiliteit, òf loeigrote afbeeldingen, òf niet zonder javascript, enz.). Ik ben eens begonnen met een overzicht van wat wel/niet werkt, met screenshots van uitgevoerde testen, maar dat is niet verder gekomen dan het beginstadium.
 
eccros,
Je moet wat met de margin-left spelen en natuurlijk elke link in een andere div.
de px die ik gebruikt heb zijn maar als voorbeeld.
als je voor item1 bv. een margin neemt van -200px, daaronder komt dan item2 die moet dan iets verder naar links beginnen en die geef je een margin van bv -220px enz..
stel item3 staat in het midden dan komt daar -240px bv
en item4 die daar onder komt moet dan weer -220 px hebben enz..
uiteraard mag je link niet te lang zijn en de negatieve margin moet uiteraard ook meer zijn dan de helft van je wereldbol anders valt de tekst er in.
dus wereldbol = 500px, link is bv 75px als je dan een negatieve margin neemt van 200+75px en nog wat ruimte om de link niet tegen de wereldbol tel laten komen bv 20px dan heb je een negatieve margin nodig van 250+75+20 = 295px.
dat is dan de lin die in het midden staat bv item3
voor item2 neem je dan 20px minder en voor item 4 ook enz.
succes
 
@che: op die manier is het niet echt variabel want als je toch eendere link-tekst wil moet je de margin ook gaan veranderen en dat vind ik niet zo handig.

bedankt csshunter (en ook goeroeboeroe) dit is precies wat ik zocht.:D
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan