Check alle échte Black Friday-deals Ook zo moe van nepaanbiedingen? Wij laten alleen échte deals zien
Toon posts:

[CSS]div's hyperlinks en inhoud niet naast elkaar

Pagina: 1
Acties:
  • 275 views

Verwijderd

Topicstarter
Hey jongens!

Ik werk sinds kort met div'jes, dus echt ervaren ben ik niet op dit gebied.

Het probleem is zoals de afbeelding weergeeft. De tekst komt schuin onder de hyperlinks te staan, wat ik niet wil.

Afbeeldingslocatie: http://img167.imageshack.us/img167/3411/screenwebpaginaba5.th.jpg

Hieronder komt de broncode.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Welkom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type ="text/css">
<!--
body {
position: relative;
background-color: #DDDDDD
}

.hoofdcontainer {
position: relative;
width: 900px;
padding: 10px;
margin-left: auto;
margin-right: auto;
}

.container {
border: none;
width: 900px;
padding: 10px;
margin-left: auto;
margin-right: auto;
vertical-align: middle;
}

.container2 {
position: relative;
border: 1px dashed #FF0000;
border: none;
width: 900px;
padding: 10px;
margin-left: auto;
margin-right: auto;
vertical-align: middle;
float: left;
}

.container3 {
position: relative;
vertical-align: top;
border: 1px dashed #FF0000;
width: 500px;
padding: 10px;
margin-left: 140px;
margin-right: 15px;
padding: 10px;
vertical-align: middle;
float: left;
}

.header {
border: none;
width: 900px;
height: 158px;
text-align: center;
vertical-align: middle;
margin-left: auto;
margin-right: auto;
margin-bottom: 1em;
padding: 0px;
position: relative;
background-image: url(topframe.png);
}

.linksboven {
border: none;
color: #000000;
text-align: center;
width: 150px;
height: 46px;
margin: 0px;
padding: 0px;
float: left;
background-image: url(hyperlinktopbar.png);
}
.menu {
border: none;
color: #000000;
text-align: center;
width: 113px;
height: 33px;
margin: 0px;
padding: 0px;
background-image:url(hyperlinkleft.png);
}

.rechtsboven {
border: none;
color: #000000;
text-align: center;
width: 150px;
height: 46px;
margin: 0px;
padding: 0px;
float: right;
background-image: url(hyperlinktopbar.png);
}

div.inhoud {
vertical-align: top;
top: 0px;
width: 500px;
height: auto;
float: right;
text-align:left;
}

a:link {
color: #EEDDEE;
} /*unvisited link */


a:hover {
text-decoration: none;
color:#CC6633
} /*link changes color when mouse over */

a:visited {
color: #993300
} /*visited link */

a:active {
color:#FF0000
} /*active link */

div.spacer {
clear: both
}
-->
</style>
</head>

<body>
<div class="hoofdcontainer">
<div class="container">
<div class="header"></div>
<div class="linksboven"></div>
<div class="linksboven"></div>
<div class="linksboven"></div>
<div class="rechtsboven"></div>
<div class="rechtsboven"></div>
<div class="rechtsboven"></div>
<div class="container2">
<div class="menu"><a href="index.htm">Home</a></div>
<div class="menu"><a href="#">Over het bedrijf</a></div>
<div class="menu"><a href="#">Stage</a></div>
</div>
</div>
</div>
</div>
</div>


</html>

  • frickY
  • Registratie: Juli 2001
  • Laatst online: 18-11 14:08
Zet je html eens in [code=html][/code] blokken.

Een div is een block-element. Als je iets naast een div wilt plaatsen zul je hem moeten floaten.

  • TeeDee
  • Registratie: Februari 2001
  • Laatst online: 19:52

TeeDee

CQB 241

• had je er niet een grotere screenshot van kunnen maken?
• ik heb het idee dat je nu je table based layout keihard aan het omzetten bent waarbij je <td>'s en/of <tr>'s hernoemt hebt naar <div>.

Je hebt, in de volksmond, nu last van diveritus/divitus.

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


Verwijderd

Topicstarter
Ik weet niet hoe het anders moet. Ik zou graag een oplossing hebben, en als het beter kan, zou je het me dan kunnen laten zien? Alvast bedankt.

Verwijderd

Topicstarter
Ik heb het maar op een andere manier gedaan. De hyperlinks aan de linkerkant van de pagina heb ik verwijderd, aangezien ik ook een ruimte heb om hyperlinks bovenaan te zetten.

[ Voor 117% gewijzigd door Verwijderd op 18-04-2008 11:26 ]


  • Knaak
  • Registratie: Juni 2006
  • Laatst online: 18:48

Knaak

It's me, Mario!

Ehmm.. 2 posts achter elkaar is niet de bedoeling.

Zoals TeeDee al aangeeft ben je niet goed bezig, ga eens enkele tutorials doornemen op o.a. tutorialized.com

Verwijderd

Topicstarter
srry daarvoor. Iig bedankt. Zal ik doen.

  • RobIII
  • Registratie: December 2001
  • Niet online

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

(overleden)
Als je code post, post dan enkel relevante code en gebruik code tags. Daarnaast verwachten we wat meer eigen inzet (zie ook onze Programming Beleid Quickstart) en dat je wat meer 'meedenkt' in plaats van "ik zou graag een oplossing hebben".

En dan heb ik het nog niet eens over futiliteiten als een dubbelpost (topickick binnen 24 uur) en de loze post hierboven waarbij je dit topic, wederom, nutteloos omhoog schopt.

[ Voor 24% gewijzigd door RobIII op 18-04-2008 12:01 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

Pagina: 1

Dit topic is gesloten.