DIV naar rechts uitlijnen - Softwareontwikkeling

woensdag 16 september 2009 13:08

Acties:

0 Henk 'm!

Topicstarter

Hallo allemaal,

Als een hobbyist maak ik wel eens een website. Dit keer wat uitgebreider met CSS aan de gang gegaan en al veel geleerd.

Ik heb een leuk plaatje in de rechtsonderhoek van de pagina gezet, die staat fixed. De tekst van de pagina scrollt erachter vandaan. Goed te doen met z-index.
Op zich is dit geen probleem. Dit plaatje werd mooi weergegeven in de DIV, alleen op één van de pagina's verhinderd de rest van de (transparante) DIV dat een link in de onderliggende tekst kan worden aangeklikt.

Zodoende heb ik de breedte verkleind. Voorheen was deze de hele breedte, nu alleen nog maar de breedte van de afbeelding zelf. Alleen dit veld wil alleen nog maar links uitgelijnd worden...

Deze heb ik al geprobeerd:
- float: right;
- margin: 0 0 0 auto;
- <div align="right">

Wat is de oorzaak van mijn uitdaging en hoe is dit op te lossen?

Alvast bedankt!

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Contact/title>
<link href="styles.css" rel="stylesheet" type="text/css">

</head>

<body class="page">

<div id="container">
  <div id="mainContent">
    <h1>Contact</h1>
    <p>tekst</p>
  </div>
  <div id="header">header</div>
  <div id="menu_div">menu</div>
  <div id="footimg"></div>
  <div id="footer">
    <p>text</p>
  </div>
</div>
</body>
</html>

Cascading Stylesheet:

@charset "utf-8";
body {
    font: 100% Rockwell, Verdana, Geneva, sans-serif;
    margin: 0;
    padding: 0;
    text-align: center;
    color: #000000;
    background-position: top right;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.page #header {  
    padding: 0;
    background-image: url(images/header.png);
    background-position: left bottom;
    background-repeat: no-repeat;
    background-color: #FFFFFF;
    position: fixed;
    top: 0px;
    width: 46em;
    height: 100px;
    z-index: 3;
}
.page #container {
    width: 46em;
    background: #FFFFFF;
    margin: 130px auto 1em;
    border: 0;
    text-align: left;
}
#container ul {
    margin-left: 22px;
    padding-left: 0px;
    list-style-image: url(images/bullet.png);
    list-style-position: outside;
}
#container li {
    margin-top: 0;
    margin-bottom: 7px;
}
#plist {
    margin-top: 0;
    margin-bottom: 7px;
}
.page #container h1 {
    color: #FF8800;
    font-family: Arial, Helvetica, sans-serif;
}
.page #container h2 {
    color: #FF8800;
    margin-bottom: 7px;
}
.page #container h3 {
    color: #FF8800;
    margin-top: 7px;
    margin-bottom: 7px;
}
.page #mainContent {
    padding: 5px 10px;
    background: #FFFFFF;
}
.page #footimg { 
    padding: 0px;
    position: fixed;
    bottom: 1em;
    z-index: 3;
    width: 158px;
    height: 160px;
    background-image: url(images/image-rb.png);
    background-repeat: no-repeat;
    background-position: bottom right;
} 
.page #footer { 
    padding: 0px;
    background-color: #BCC225;
    position: fixed;
    bottom: 0px;
    z-index: 3;
    width: 46em;
    height: 1em;
} 
.page #footer p {
    color: #5F6D30;
    margin: 0;
    padding: 3px;
    font-size: 9px;
    text-align: center;
    font-family: Verdana, Geneva, sans-serif;
}

woensdag 16 september 2009 13:29

Acties:

0 Henk 'm!

wackmaniac

Als de afbeelding / div altijd rechtsonder moet staan ongeacht wat zou ik deze absolute weergeven:

Cascading Stylesheet:

div.image {
  bottom: 0;
  height: 100px;
  position: absolute;
  right: 0;
  width: 100px;
}

Read the code, write the code, be the code!

woensdag 16 september 2009 14:01

Acties:

0 Henk 'm!

DeZzL

Rocket surgeon

Heb je hier iets aan?

Due to an IE bug, if you are putting links within an element with a transparent background, the element must not have a CSS relative/absolute position. Otherwise the links will likely be un-clickable.

[ Voor 42% gewijzigd door DeZzL op 16-09-2009 14:02 ]

woensdag 16 september 2009 14:45

Acties:

0 Henk 'm!

DJ JB

Topicstarter

@DaZzL: voor zover ik kan zien, is dit niet waar ik op doel.

@wackmaniac: met absolute laat de DIV zich wel naar rechts uitlijnen. Het probleem is echter dat de kolom waarin de pagina-inhoud staat, niet 100% paginavullend is, maar 46em breed is (zie de container). Met abolute valt 'ie uit de container en lijnt 'ie helemaal rechts uit (buiten de inhoud). Uiteraard kan dit weer gecompenseerd worden met een afstand vanaf rechts, maar dit kan natuurlijk alleen als de hele wereld dezelfde schermresolutie heeft en alles gemaximaliseerd heeft staan.

Kortom: ik wil de DIV van de afbeelding binnen de inhoudDIV houden en daarbinnen naar rechts uitlijnen.

woensdag 16 september 2009 16:30

Acties:

0 Henk 'm!

wackmaniac

De container position: relative geven helpt dan waarschijnlijk wel

Read the code, write the code, be the code!

woensdag 16 september 2009 16:39

Acties:

0 Henk 'm!

DJ JB

Topicstarter

Uitlijnen gaat nu wèl goed, maar nu scrollt de afbeelding mee met de inhoud.

woensdag 16 september 2009 20:33

Acties:

0 Henk 'm!

JefSnare

DJ JB schreef op woensdag 16 september 2009 @ 16:39:
Uitlijnen gaat nu wèl goed, maar nu scrollt de afbeelding mee met de inhoud.

Ehm, misschien werkt margin-top: 0 en postion: fixed;
Tis weer een tijdje terug die posities

Twitter Flickr

woensdag 16 september 2009 22:11

Acties:

0 Henk 'm!

curry684

left part of the evil twins

Position:fixed is helaas slecht tot niet ondersteund in 'bepaalde oudere browsers'. Wat je kunt doen is position fixed toepassen voor de browsers die het ondersteunen en met conditional comments een JS includen die on-scroll de absolute position van het ding aanpast.

Professionele website nodig?

donderdag 17 september 2009 20:30

Acties:

0 Henk 'm!

DJ JB

Topicstarter

curry684 schreef op woensdag 16 september 2009 @ 22:11:
Position:fixed is helaas slecht tot niet ondersteund in 'bepaalde oudere browsers'. Wat je kunt doen is position fixed toepassen voor de browsers die het ondersteunen en met conditional comments een JS includen die on-scroll de absolute position van het ding aanpast.

Ik heb gekeken hoeveel mensen nog zulke oude IE-versies gebruiken, gemiddeld genomen bijna niemand meer. Als je echter een goed voorstel hebt... (ik heb me nog nooit echt aan javascript gewaagd).

@Jefsnare: het gaat niet om de verticale uitlijning, maar om de horizontale uitlijnen. Ik snap niet wat margin-top er dan mee te maken heeft.

donderdag 17 september 2009 23:18

Acties:

0 Henk 'm!

curry684

left part of the evil twins

IE6 is helaas nog niet verwaarloosbaar hoor, 10+% afhankelijk van je publiek

Professionele website nodig?

donderdag 17 september 2009 23:41

Acties:

0 Henk 'm!

JefSnare

DJ JB schreef op donderdag 17 september 2009 @ 20:30:
[...]
@Jefsnare: het gaat niet om de verticale uitlijning, maar om de horizontale uitlijnen. Ik snap niet wat margin-top er dan mee te maken heeft.

*Kuch verkeerd gelezen....

uhm dan heeft het niks te maken met margin-top idd

Twitter Flickr

vrijdag 18 september 2009 01:07

Acties:

0 Henk 'm!

DJ JB

Topicstarter

curry684 schreef op donderdag 17 september 2009 @ 23:18:
IE6 is helaas nog niet verwaarloosbaar hoor, 10+% afhankelijk van je publiek

Ca. 10% vind ik te weinig om moeilijk voor te doen. Heb een simpel script gevonden die de browserversie kan detecteren. IE<7 gebruikers worden doorgeleid naar een aparte pagina met enkel contactdetails, minder fancy dan de rest. Simpel doch doeltreffend. Als er een alternatief is om het geheel voor iedereen toch goed zichtbaar te maken, dan houd ik mij zeker aanbevolen!

vrijdag 18 september 2009 01:47

Acties:

0 Henk 'm!

curry684

left part of the evil twins

DJ JB schreef op vrijdag 18 september 2009 @ 01:07:
[...]

Ca. 10% vind ik te weinig om moeilijk voor te doen.

Uh okee mijn klanten wurgen me als ik uit luiheid 10% van hun omzet door de plee spoel, dus ik hoop voor jou dat dit een site voor jezelf betreft...

Professionele website nodig?

zondag 20 september 2009 14:28

Acties:

0 Henk 'm!

DJ JB

Topicstarter

Mwah, de omzet gaat niet weg, ze krijgen alleen een iets andere pagina te zien.

Back on-topic: hoe krijg ik dat plaatje goed?

zondag 20 september 2009 14:46

Acties:

0 Henk 'm!

Volvados

Gisteren heb ik toevallig ook een hele tijd aan het knoeien geweest met het rechts uitlijnen van een div in een div

Ik heb het uiteindelijk klaargekregen door bij de buitenste div de position op relative, en bij de binnenste op absolute te zetten. Daarna kan je de bottom en right op 0px zetten om de div rechtsonder te zetten.
Voor mij heeft dit geholpen, weet niet of je er ook wat aanhebt...

zaterdag 26 september 2009 17:33

Acties:

0 Henk 'm!

DJ JB

Topicstarter

AYv3z: zou je de code kunnen plaatsen, want bij mij werkt het nog steeds niet.

Ik heb ook geprobeerd aan weerszijden 2 lege kolommen te plaatsen, maar daar ging 'ie ook overheen.
En zolang ik de binnenste op Absolute heb staan, blijft 'ie meescrollen met maincontent of staat 'ie halverwege als de pagina korter is dan het scherm (zelfs als ik de container een height van 100% geef).

Ik heb vandaag weer uren lang alle combinaties uit zitten proberen, maar ik krijg het gewoon niet gedaan.

[ Voor 12% gewijzigd door DJ JB op 26-09-2009 17:36 ]

zaterdag 26 september 2009 18:30

Acties:

0 Henk 'm!

Volvados

DJ JB schreef op zaterdag 26 september 2009 @ 17:33:
AYv3z: zou je de code kunnen plaatsen, want bij mij werkt het nog steeds niet.

Ik heb ook geprobeerd aan weerszijden 2 lege kolommen te plaatsen, maar daar ging 'ie ook overheen.
En zolang ik de binnenste op Absolute heb staan, blijft 'ie meescrollen met maincontent of staat 'ie halverwege als de pagina korter is dan het scherm (zelfs als ik de container een height van 100% geef).

Ik heb vandaag weer uren lang alle combinaties uit zitten proberen, maar ik krijg het gewoon niet gedaan.

Hmm, nu pas begrijp ik wat je eigenlijk wilde doen

Mij lijkt het dan gewoon makkelijker om de div met de content in scrollbaar te maken.
Dit is te doen met overflow: auto.
Wel moet je dan een hoogte ingeven (mss in %). Anders wordt hij niet scrollbaar denk ik.