[CSS] position: relative; - Softwareontwikkeling

vrijdag 21 maart 2008 12:44

Acties:

Verwijderd

Topicstarter

Ik heb nu een site, en het menu wil ik relatief van de top 40px en van links 40px weergeven. Ik heb daar dus een div voor gemaakt.

div.menu {
position: relative;
top: 40;
left: 40;
}

Oke, als ik nu gewoon <div class="menu">Test</div> doe, komt de tekst op de goede plek te staan. Maar als ik hier een tabel wil maken, komt hij helemaal onderaan mijn pagina... Iemand die mij kan helpen?

vrijdag 21 maart 2008 12:45

Acties:

TeeDee

CQB 241

40 wat? Bananen?

Verder: zo is het wel wat karig. Geef eens wat meer, of liever een online testcase, code.

[ Voor 74% gewijzigd door TeeDee op 21-03-2008 12:46 ]

Heart..pumps blood.Has nothing to do with emotion! Bored

vrijdag 21 maart 2008 12:46

Acties:

Bozozo

Your ad here?

Als je div.menu in je CSS zet dan geldt die stijl alleen voor DIV elementen met de class "menu". Als je ook andere elementen die class wilt geven moet je gewoon .menu { ... } neerzetten.

Ik snap trouwens sowieso niet hoe een tabel helemaal onderaan je pagina terecht kan komen.

TabCinema : NiftySplit

vrijdag 21 maart 2008 12:52

Acties:

Verwijderd

Topicstarter

Dit is wat ik nu heb. Let op, de table heeft nu de class menu.

<html>
<head>
<style type="text/css">
div.header {
background: url("images/header.gif");
repeat: no-repeat;
height: 213;
}
div.content {
background: url("images/menu.gif");
repeat: no-repeat;
height: 365;
}
table.menu {
position: relative;
top: 40px;
left: 40px;
}
</style>
<title>layout1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="black" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" height="100%" border="0">
<tr align="center">
<td valign="middle">
<table width="983" border="0" cellpadding="0" cellspacing="0">
<div class="header">
</div>
<div class="content">
<table border="1" width="100" height="200" class="menu">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>

vrijdag 21 maart 2008 12:55

Acties:

the-edge

* the-edge vindt de code tag geen overbodige.

Cascading Stylesheet:

div.header {
background: url("images/header.gif");
repeat: no-repeat;
height: 213;
}
div.content {
background: url("images/menu.gif");
repeat: no-repeat;
height: 365;
}

Zoals hierboven gezegd : Height: 365; ... 365 wat?

vrijdag 21 maart 2008 12:59

Acties:

crisp

Devver

Pixelated

Wat wil je precies bereiken? Relative positioning is zelden de juiste oplossing, net zo min als tabellen gebruiken voor layout...

Intentionally left blank

vrijdag 21 maart 2008 13:08

Acties:

Verwijderd

Topicstarter

Ik heb 2 divs boven elkaar met allebei een achtergrondplaatje. Ik vind het ook een irritante manier van werken maar het moet zo van school. Ik wil dus een menu maken, dat is dus een tabel. Een vierkant met ronde hoekjes. Maar als ik hem op de huidige layout wil plaatsen, komt hij er onder. Zie hier: het vak moet komen waar de witte pijl naar wijst. Sorry voor de onduidelijkheid
http://img171.imageshack.us/img171/8113/naamloosub2.jpg

vrijdag 21 maart 2008 13:15

Acties:

the-edge

Verwijderd schreef op vrijdag 21 maart 2008 @ 13:08:
Ik heb 2 divs boven elkaar met allebei een achtergrondplaatje. Ik vind het ook een irritante manier van werken maar het moet zo van school. Ik wil dus een menu maken, dat is dus een tabel. Een vierkant met ronde hoekjes. Maar als ik hem op de huidige layout wil plaatsen, komt hij er onder. Zie hier: het vak moet komen waar de witte pijl naar wijst. Sorry voor de onduidelijkheid
http://img171.imageshack.us/img171/8113/naamloosub2.jpg

Is het niet de bedoeling dat je dit juist zelf uit moet gaan zoeken? Sorry, maar ik doe geen huiswerk voor andere..

vrijdag 21 maart 2008 13:19

Acties:

weijl

Verwijderd schreef op vrijdag 21 maart 2008 @ 13:08:
Ik heb 2 divs boven elkaar met allebei een achtergrondplaatje. Ik vind het ook een irritante manier van werken maar het moet zo van school. Ik wil dus een menu maken, dat is dus een tabel. Een vierkant met ronde hoekjes. Maar als ik hem op de huidige layout wil plaatsen, komt hij er onder. Zie hier: het vak moet komen waar de witte pijl naar wijst. Sorry voor de onduidelijkheid
http://img171.imageshack.us/img171/8113/naamloosub2.jpg

Waarom is dat dus een tabel?
Waarom geen lijstje met items?

[ Voor 132% gewijzigd door weijl op 21-03-2008 13:21 ]

vrijdag 21 maart 2008 13:19

Acties:

Verwijderd

Ik snap eigenlijk niet waarom je het met position wilt afhandelen.
Een margin: 40px 0 0 40px; zou ook kunnen volstaan.
Dan zou het blokje wel binnen het element moeten zitten

trouwens... nasty code. Dit kan slimmer en met minder.

HTML:

<body>
  <div id="wrapper">
    <div id="header">
    </div>
    <div id="content">
      <ul id="menu">
        <li>linkje</li>
        <li>linkje</li>
      </ul>
    </div>
  </div>
</body>

en maak daarmaar je eigen css bij

[ Voor 49% gewijzigd door Verwijderd op 21-03-2008 13:25 ]

vrijdag 21 maart 2008 13:24

Acties:

OkkE

CSS influencer :+

Ik zou sowieso geen tabellen gebruiken voor layout. De opzet die je wil maken is erg eenvoudig te maken door gebruik van de juiste elementen icm CSS. Op deze Layout Gala site vind je een aantal voorbeelden.

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

vrijdag 21 maart 2008 13:32

Acties:

Verwijderd

Topicstarter

Oke, thx
EDIT: dat menu maak ik met een tabel omdat het een vakje met ronde hoeken moet zijn. Heb dus 4 gifjes, daarom met een tabel.

[ Voor 88% gewijzigd door Verwijderd op 21-03-2008 13:37 ]

vrijdag 21 maart 2008 14:45

Acties:

Bosmonster

*zucht*

Verwijderd schreef op vrijdag 21 maart 2008 @ 13:32:
Oke, thx
EDIT: dat menu maak ik met een tabel omdat het een vakje met ronde hoeken moet zijn. Heb dus 4 gifjes, daarom met een tabel.

Das geen reden om een tabel te gebruiken. Persoonlijk zou ik ronde hoekjes ook op een hele andere manier oplossen (met 2 divjes en twee achtergrondplaatjes bijvoorbeeld).

vrijdag 21 maart 2008 14:52

Acties:

Fuzzillogic

Cool

Bosmonster schreef op vrijdag 21 maart 2008 @ 14:45:
[...]

Das geen reden om een tabel te gebruiken. Persoonlijk zou ik ronde hoekjes ook op een hele andere manier oplossen (met 2 divjes en twee achtergrondplaatjes bijvoorbeeld).

Vaak kan het ook al zonder div-gecrap

Maar idd, een tabel is echt zelden een noodzaak. Tenzij je zaken in een tabel wilt weergeven, uiteraard.

En @TS: vergeet de doctype niet. Anders zul je uren naar rare problemen aan het zoeken zijn omdat je anders in quirks-mode werkt. Zonde van de tijd.

vrijdag 21 maart 2008 15:04

Acties:

Verwijderd

Ronde hoekjes zonder table crap:
http://www.alistapart.com/articles/slidingdoors/

Dit is ook te vertalen naar 4 ronde hoekjes:

HTML:

<ul id="menu">
  <li><a href="#">link</a></li>
  <li><a href="#">link</a></li>
</ul>

Meer heeft je html niet nodig voor die hoekjes. Je geeft je A een background image die wat langer doorloopt zoals aangegeven in de url hierboven en je LI krijgt een background image die heel kort is.

voorbeeldje: http://dev.flexservers.nl/producten/linux-servers.php

Kijk uit met het gebruik van tabellen voor dit soort doeleindes

[ Voor 59% gewijzigd door Verwijderd op 21-03-2008 15:10 ]

vrijdag 21 maart 2008 16:10

Acties:

Bosmonster

*zucht*

Fuzzillogic schreef op vrijdag 21 maart 2008 @ 14:52:
[...]

Vaak kan het ook al zonder div-gecrap Maar idd, een tabel is echt zelden een noodzaak. Tenzij je zaken in een tabel wilt weergeven, uiteraard.

En @TS: vergeet de doctype niet. Anders zul je uren naar rare problemen aan het zoeken zijn omdat je anders in quirks-mode werkt. Zonde van de tijd.

Je hebt meerdere elementen nodig. Of dat nu divs of iets anders zijn maakt niet uit natuurlijk. Als jij ronde hoekjes in één element (met alleen css dus) kan krijgen dan zie ik heel graag een voorbeeld

Bovenstaande voorbeeld doet het met een li en een a. Maar das dan logischerwijs voor een menu. Als ik alleen een container wil hebben met ronde hoekjes gebruik ik twee divjes natuurlijk.

[ Voor 14% gewijzigd door Bosmonster op 21-03-2008 16:15 ]

zaterdag 22 maart 2008 23:19

Acties:

_Thanatos_

Ja, en kaal

Ronde hoekjes met een vaste hoogte (in pixels) is prima te bereiken met Sliding Doors, en ook al is de hoogte variabel, dan gebruik je er twee boven elkaar. Presto: 4 elementen, of 2 elementen bij vaste hoogte

//edit
oeps, dat zei dicabrio ook al, maar ik voeg er dus aan toe dat het met variabele hoogte kan

[ Voor 16% gewijzigd door _Thanatos_ op 22-03-2008 23:20 ]

日本！🎌

zondag 23 maart 2008 15:29

Acties:

Verwijderd

Topicstarter

Thx voor de handige links, ik ga er mee aan de slag

maandag 24 maart 2008 17:09

Acties:

Verwijderd

Topicstarter

Het is me nog niet gelukt. Ik heb geprobeerd 2 divs over elkaar te plaatsen maar dat lukte niet, nu heb ik 1 plaatje als achtergrond. Het positioneren van de tekst van het menu lukt dan nog, maar als ik een iframe wil toevoegen komt mijn menu ook op steeds andere plekken. Dit heeft weer te maken met die position: relative. Het menu moet dus in de het linkse vakje komen te staan, en de tekst in het rechtse vak. Hoe kan ik dit het beste oplossen? Tot nu toe heb ik dit.

<html>
<head>
<style type="text/css">
body {
background: url('images/background.jpg') no-repeat center top;
bgcolor: black;
font-family: arial, serif;
}
span.menu {
position: relative;
top: 27px;
left: 30px;
}
a:link,a:visited,a:active {
text-decoration: none;
font-weight: bold;
color: orange;
}
a:hover {
color: cyan;
}
.iframe {
position: relative;
top: 80px;
left: 285px;
}
</style>
<title>layout1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="black" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" height="100%" border="0">
<tr align="center">
<td valign="middle">
<table width="983" border="0" cellpadding="0" cellspacing="0">
<span class="menu">
<ul>
<li><a href="ik.html">Ik</a></li>
<li><a href="design.html">Design</a></li>
<li><a href="communicatie.html">Communicatie</a></li>
<li><a href="css.html">CSS</a></li>
</ul>
</span>
</td>
</tr>
</table>
</body>
</html>

http://img380.imageshack.us/img380/1282/naamlooszf3.jpg

Als ik die tabel tags weghaal, komt mijn menu ook weer op een andere plek.

maandag 24 maart 2008 17:33

Acties:

kalizec

Begin dan eerst eens met het weghalen van die table-tags en vervang ze door iets wat geen table is. Zoals hierboven nu al 10+ keer gezegd is. Een table hoort niet thuis in een layout.

Core i5-3570K/ASRock Z75 Pro3/Gigabyte Radeon HD7850/Corsair XMS3 2x4GB/OCZ Vertex2 64GB/3x640GB WD Black/24" B2403WS Iiyama x2/Nec 7200S

maandag 24 maart 2008 17:51

Acties:

Verwijderd

Topicstarter

Zoiets?

<html>
<head>
<style type="text/css">
body {
background: url('images/background.jpg') no-repeat center top;
bgcolor: black;
font-family: arial, serif;
}
span.menu {
position: relative;
top: 27px;
left: 30px;
}
a:link,a:visited,a:active {
text-decoration: none;
font-weight: bold;
color: orange;
}
a:hover {
color: cyan;
}
.header {
position: relative;
height: 213px;
width: 100%;
}
.links {
position: relative;
height: 100%;
width: 32%;
}
.rechts {
position: relative;
height: 100%;
width: 68%;
}
</style>
<title>layout1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="black" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<span class="header">test</span>
<span class="links">test</span>
<span class="rechts">test</span>
<span class="menu">
<ul>
<li><a href="ik.html">Ik</a></li>
<li><a href="design.html">Design</a></li>
<li><a href="communicatie.html">Communicatie</a></li>
<li><a href="css.html">CSS</a></li>
</ul>
</span>
</body>
</html>