Liquid corners midden op de pagina?
Een website die ik een tijd terug heb gemaakt bevatte een grootte div "container" deze was gecentreerd midden op de pagina en had een oranje rand, echter waren de hoeken nogal hoekig.
Nu was ik van plan om ronde hoeken in te voeren en dit heb ik met een tutorial gedaan, leuk en aardig, maar ik krijg de ronde hoeken niet om mijn grootte centrale divje heen.
Hieronder is een link naar het voorbeeld, je ziet meteen het probleem al,
http://www.e-magin.nl/Noorderlicht/rondehoek/home.html
Nu moeten die balkjes boven en onder dus smaller worden en centreren,
het script vraagt een gifje op van 1280*18, hier zitten duse de bovenste en onderst balk in,
De div in het midden is 750 px breed en 500 px hoog, het heeft geen zin om een gif neer te zetten van 750*18, dan komen er gewoon 2 naast elkaar,
hieronder is de stylesheet die de zooi op orde moet zetten:
body {
font: 11px/17px Verdana, Arial, sans-serif; /* make the font look a little nicer than default times new roman */
text-align: center; /* center the layout in IE 5 */
background-image: url('images/ocean1.jpg');
}
.top-left {
margin-right: 9px; /* hou rechter hoekje vrij */
background-image: url('images/corners1280x18.gif');
height: 9px; /* toon alleen bovenste helft van de figuur */
font-size: 2px; /* corrigeer hoogte voor IE */
}
.top-right {
margin-top: -9px; /* naar niveau van linker hoekje */
margin-left: 9px; /* hou linker hoekje vrij */
background-image: url('images/corners1280x18.gif');
background-position: 100% 0; /* laat achtergrond vanaf rechts beginnen */
height: 9px;
font-size: 2px;
}
.bottom-left {
margin-right: 9px; /* hou rechter hoekje vrij */
background-image: url('images/corners1280x18.gif');
background-position: 0 -9px; /* toon onderste helft figuur */
height: 9px;
font-size: 2px;
}
Hier volgt de html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="liquidcorners.css">
<title>Mijn eerste opgemaakte pagina</title>
</head>
<body>
<div class="top-left"></div>
<div class="top-right"></div>
<div class="inside">
<p class="notopgap">Hier kun je een regeltje tekst plaasten</p>
<p class="nobottomgap">En ook hier kan dat</p>
</div>
<div class="bottom-left"></div>
<div class="bottom-right"></div>
</body>
</html>
Ik probeer zelf steeds te vogelen hoe ik het op orde kan krijgen er is namelijk een klein beetje haast bij,
Als jullie mij hier zouden kunnen helpen zou ik echt gered zijn, bij voorbaat dank,
Kevin Damstra
Gewijzigd op 01/01/1970 01:00:00 door Kevin damstra
maar ik denk dat je op en van je divs margin:0 auto; doet om hem in het midden te krijgen.
ik denk dat het opgelost is als je er een container omheen stopt, en die in het midden zet.
container:
dat kan ik zeker gewoon doen door:
.container{
width: 750px;
height: 500px;
}
aan te maken en dan in de html
<div class="conatiner">
CSS voor de ronde hoekending
</div>
zie: http://www.css3.info/preview/rounded-border/
Het is een klantgerichte website (in aanmaak) dus hij moet ook voor zoveel mogelijk mensen toegankelijk zijn,
Ik zal hier op de site eens kijken voor de tutorial misschien dat ik er iets wijzer van kan worden,
Alvast bedankt,
die kan ik niet zomaar dimensioneren, die houden hun eigen breedte, of ze komen heel raar verdeeld te zitten
Ik stuur je wel een PM.
Greetz
http://www.designwouter.be/phphulpkevin/
Ik heb wel even gebruik gemaakt van inline-style's.
index.php
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Voorbeeld voor kevin</title>
</head>
<body>
<div id="top" style="background: url('top.jpg'); height: 30px; width: 400px;"></div>
<div id="inside" style=" background-color: #FF9C01; width: 400px; margin-top: -20px; margin-bottom: -20px;">
<p style="color: white; text-align: center;">Hier kun je een regeltje tekst plaasten</p>
<p style="color: white; text-align: center;">En ook hier kan dat</p>
</div>
<div id="bottom" style="background: url('bottom.jpg'); height: 30px; width: 400px;"></div>
</body>
</html>
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Voorbeeld voor kevin</title>
</head>
<body>
<div id="top" style="background: url('top.jpg'); height: 30px; width: 400px;"></div>
<div id="inside" style=" background-color: #FF9C01; width: 400px; margin-top: -20px; margin-bottom: -20px;">
<p style="color: white; text-align: center;">Hier kun je een regeltje tekst plaasten</p>
<p style="color: white; text-align: center;">En ook hier kan dat</p>
</div>
<div id="bottom" style="background: url('bottom.jpg'); height: 30px; width: 400px;"></div>
</body>
</html>
De truc is:
- Maak 2 plaatjes
---top
---bottom
En daarna ga je deze gewoon simpel onder mekaar plaatsen en daar zet je je content tussen.
Edit:
Mijn bottom plaatje is een beetje slechter dan de top sorry.
Kevin: Ik hoop dat je het begrijpt en er iets aan hebt.
Gewijzigd op 01/01/1970 01:00:00 door Wouter K
plaatjes maken kan ik zelf nog wel ;)
Ik heb ronde hoeken op http://www.fietsverhuur-terschelling.nl/
Ik dacht mooi ik heb het voor elkaar, ik heb het gemaatk op een macbook bij een resolutie van 1280*800, zag er leuk uit in firefox,
nu kom ik erachter dat ik 2 problemen heb,
ik heb de borders 3px breed en het lichaam 744, in mozilla kom je dan uit op 3+3+744 = 750
Helaas werkt dit in IE niet, die rekent automatisch de borders mee dus die heeft een lichaam van 744-3-3 = 738
Eeen ander probleem is dat de hoogte gekoppeld is aan de hoogte van het scherm in percentages,
De site ziet er alleen lekker uit in 1280*800 in mozilla,
Nu kan ik die schermresoluties wel verhelpen door een container eromheen te maken, en dan de maten te stellen in pixels ten opzichte van de container.
Maar wie heeft er een idee of een stukje code waardoor de ronde hoeken ook passen in IE en niet alleen in mozilla firefox?
Ik heb eerst in kleuren een opzet met divjes gemaakt om een beter overzicht te krijgen:
http://www.e-magin.nl/Noorderlicht/test/kleurentest/kleurentest.html
Hier is de site zelf, nog lang niet af, maar er zit voor mij structuur in :D
www.fietsverhuur-terschelling.nl
kevin damstra schreef op 06.05.2008 21:19:
Hier is de site zelf, nog lang niet af, maar er zit voor mij structuur in :D
www.fietsverhuur-terschelling.nl
www.fietsverhuur-terschelling.nl
In de header gebruik je de font tag. Die is prehistorisch, dus niet meer aan te raden. In IE7 ziet hij er gek uit. Gewoon in de CSS een grootte opgeven en je hebt nergens meer last van.
Ik heb alleen op Mozilla en IE gelet
ik heb zelf geen opera of safari, misschien dat ik daar later nog naar kijk...
Ik heb nu de font size aangepast in css bestand, echter maakt dit niks uit je ziet nog steeds halve tekst in IE,
ook heb ik gerpobeerd de div hoogtes aan te passen, maar dat maakt niks uit, ik zie zo snel even niet waar het probleem zit...
@ Hipska: thnx :)