Archief - Onpositioneerbare div

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
:

::SaBeR::

Legacy Member
Hai.

Ik heb een probleem en heb al vanalles geprobeerd om het op te lossen.

KLIK HIER
in de link is een cyaankleurig divje the zien. Dat staat waar het moet staan, maar ik vind geen manier om er voor te zorgen dat de rest niet naar beneden wordt geduwd...

Kan iemand mij helpen? Alvast bedankt.

EDIT: hij is momenteel nog veel te zwaar door de achtergrondafbeelding, maar dat komt in orde.

de CSS:

Code: 
@charset "UTF-8";

html, body {
width: 100%;
height: 100%; 
min-height: 100%;
}

body {
background: url(images/bg.jpg) center center fixed no-repeat;
-moz-background-size: cover;
background-size: cover;
margin: 0;

}

a {
color: #fff;
text-decoration: none;
}

a:hover {
color: #9ed1e6;
text-decoration: none;
}

h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #006f9c;
font-size: 18px;
margin-left: 30px;
}

p {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #666666;
font-size: 12px;
margin-left: 30px;
margin-right: 30px;
}

#headerwrap {
height: 140px;
}

#header {
height: 140px;
width: 960px; 
margin: 0 auto;
background-image: url(images/logo.png);
background-repeat: no-repeat;
}

#logosub {
width: 150px;
height: 150px;
background-color:#00fff0;
margin-left:auto;
margin-right:auto;
position: relative;
left : -483px;
}

#menuwrap {
width: 815px;
height: 41px;
margin: 0 auto;
padding-top: 8px;
background-color:#fff;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
-khtml-border-top-left-radius: 6px;
-khtml-border-top-right-radius: 6px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;

}

	#menu {
	margin-left: 8px;
	margin-right: 8px;
	height: 30px;
	background-color:#002248;
	-moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #fff;
	font-size: 12px;
	}
	
	.menuitem {
	float: left;
	margin-top: 5px;
	margin-left: 18px;
	}


#contentwrap {
position: relative;
width: 815px; 
min-height: 1px;
margin: 0 auto;
background-color: #fff;
overflow: auto;
}
	.square {
	width: 200px;
	height: 200px;
	float: left;
	background-color: #fff;
	}
	
	#promoties {
	width: 600px;
	height: 200px;
	float: left;
	background-color: #fff;
	}
	
	#content {
	width: 600px;
	float: left;
	background-color: #fff;
	}

#footer {
width: 100%;
height: 180px;
}

	#footerlogos {
	margin: 0 auto;
	width: 831px;
	height: 69px;
	background-image:url(images/footer-logos.png);
	}
	
	#footerbottom {
	margin: 0 auto;
	width: 100%;
	height: 111px;
	background-image:url(images/footer-logos-bottom.jpg);
	background-repeat: no-repeat;
	background-position: top center;
	background-color: #fff;
	}
	
		#footerbottomimg {
		margin: 0 auto
		}
E

Ex0dus

Legacy Member
BV: <div id="logosub">test</div> weghalen uit je body en in <div id="menuwrap"> plaatsen.

Code: 
#logosub {
    background-color: #00FFF0;
    height: 150px;
    left: -150px;
    position: absolute;
    top: 0;
    width: 150px;
}
en bij #menuwrap zen css zet ge 'position: relative'.
g

greg002

Legacy Member
Heb uw css niet echt bekeken.

Maar plaats beide elementen(blauwe vak, content) in een div en geef ze beide een float:left? Zou, denk ik, toch al voldoende moeten zijn.
G

GigaPixels

Legacy Member
Update?
Ik zie dat het nog niet is opgelost, maar ben wel benieuwd naar de oplossing :-)
d

dJeez

Legacy Member
GigaPixels zei:
Update?
Ik zie dat het nog niet is opgelost, maar ben wel benieuwd naar de oplossing :-)
Klik om te vergroten...
Wat Ex0dus zegt is een mogelijke oplossing (pas het maar eens toe met Firebug :p).
-

-BVR-

Legacy Member
Op het eerste zicht zou ik ook zeggen dat Ex0dus z'n oplossing het meest logische en simpelste is.

EDIT: dan moet wel de height van menuwrap worden aangepast en misschien op #menu een clear: both;
:

::SaBeR::

Legacy Member
Ex0dus zei:
BV: <div id="logosub">test</div> weghalen uit je body en in <div id="menuwrap"> plaatsen.

Code: 
#logosub {
    background-color: #00FFF0;
    height: 150px;
    left: -150px;
    position: absolute;
    top: 0;
    width: 150px;
}
en bij #menuwrap zen css zet ge 'position: relative'.
Klik om te vergroten...

geweldig, worked like a charm... Allemaal heel erg bedankt voor de snelle reactie!
:

::SaBeR::

Legacy Member
er zijn intussen twee nieuwe problemen opgedoken:

EDIT: DIT PROBLEEM IS AL OPGELOST DOOR EEN SIMPELE clear: both;
*de volledige contentwrap wordt in firefox naar rechts geduwd. In Safari geen enkel probleem.

*De footerblock divs lopen om een voor mij duistere reden trapsgewijs nr beneden... Iets met de float?

Alvast bedankt voor de reacties

SITE (klik)

CSS:
Code: 
@charset "UTF-8";

html, body {
width: 100%;
height: 100%; 
min-height: 100%;
}

body {
background: url(images/bg.jpg) center center fixed no-repeat;
-moz-background-size: cover;
background-size: cover;
margin: 0;

}

a {
color: #fff;
text-decoration: none;
}

a:hover {
color: #9ed1e6;
text-decoration: none;
}

h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #006f9c;
font-size: 18px;
margin-left: 30px;
}

p {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #666666;
font-size: 12px;
margin-left: 30px;
margin-right: 30px;
}

#headerwrap {
height: 160px;
}

#header {
height: 160px;
width: 1060px; 
margin: 0 auto;
background-image: url(images/logo.png);
background-repeat: no-repeat;
}

#logosub {
background-image: url(images/logo-sub.png);
background-repeat: no-repeat;
background-position: right top;
height: 150px;
left: -70px;
position: absolute;
top: 0;
width: 70px;

}

#menuwrap {
position: relative;
width: 800px;
height: 41px;
margin: 0 auto;
padding-top: 8px;
background-color:#fff;
-moz-border-radius-topright: 6px;
-webkit-border-top-right-radius: 6px;
-khtml-border-top-right-radius: 6px;
border-top-right-radius: 6px;
}

	#menu {
	margin-left: 8px;
	margin-right: 8px;
	height: 30px;
	background-color:#002248;
	-moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #fff;
	font-size: 12px;
	}
	
	.menuitem {
	float: left;
	margin-top: 5px;
	margin-left: 18px;
	}


#contentwrap {
position: relative;
width: 800px; 
min-height: 1px;
margin: 0 auto;
background-color: #fff;
overflow: auto;
}
	.square {
	width: 200px;
	height: 200px;
	float: left;
	background-color: #fff;
	}
	
	#promoties {
	width: 600px;
	height: 200px;
	float: left;
	background-color: #fff;
	}
	
	#content {
	width: 600px;
	float: left;
	background-color: #fff;
	}

#footer {
width: 100%;
height: 180px;
}

	#footerlogos {
	margin: 0 auto;
	width: 800px;
	height: 106px;
	background-image:url(images/footer-logos.png);
	}
	
	#footerbottom {
	margin: 0 auto;
	padding-top: 0;
	width: 100%;
	height: 130px;
	background-image:url(images/footer-logos-bottom.jpg);
	background-repeat: no-repeat;
	background-position: top center;
	background-color: #fff;
	}
	
		#footerbottomimg {
		margin: 0 auto;
		}
		
		#footercontent {
		margin: 0 auto;
		padding-top: 30px;
		width: 780px;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		color: #666666;
		font-size: 10px;
		}
		
		.footertitle {
		font-weight: bold;
		color: #002248;
		}
		
		.footermail {
		color: #c9223d;
		}
		
		.footerblock {
		width: 200px;
		float: left;
		}
:

::SaBeR::

Legacy Member
en heeft er toevallig iemand een gemakkelijke oplossing voor wat er gebeurt met de div die links hangt en de header wanneer de site kleiner dan 1050px geschaald wordt?
K

Kilghard

Legacy Member
Dat probleem zie ik nu niet meteen sorry (:
maar het zou makkelijker te zijn om te vinden als je dit al even deed :

<div id="menu">
<div class="menuitem"><a href="#">bedrijf</a></div>
<div class="menuitem"><a href="#">professionele markt</a></div>
<div class="menuitem"><a href="#">toonzalen</a></div>
<div class="menuitem"><a href="#">producten</a></div>
<div class="menuitem"><a href="#">merken</a></div>


ipv de class "menuitem" kan je die ook gewoon aanspreken door
in css dit te zetten :

#menu a{
//hier alles wat normaal bij menuitem staat
}

idem bij class="square" (zet er een div rond met naam .. images_square)

#images_square img{
//hier alles wat normaal bij square staat
}


& dit

<div id="footercontent">
<div class="footerblock">
<div class="footertitle">

kan gewoon geschreven worden als

<div id="footercontent" class="footerblock footertitle">


onderverdelingen maken in je css is ook altijd handig :

/**************
HEADER
**************/




Dit verandert natuurlijk niets aan je site maar maakt hem wel wat overzichtelijk (voor jezelf en ook voor mensen aan wie je een oplossing vraagt)


Ik denk trouwens dat je probleem vooral zit bij

#footercontent {
margin: 0 auto;
--------> padding-top: 30px;

hoop dat het helpt (:
s

scipicore

Legacy Member
Die div.footercontent's zijn compleet overbodig, alsook uw div.footertitle en div.footermail (vervang dit door een span).

99% kans dat het probleem opgelost is als je die footercontents weg doet.
Dus het wordt dit:

Code: 
<div id="footerbottom"> 
    <div class="footerblock"> 
        <span class="footertitle"> 
            Van Calster bvba (Geel)
        </span> 
        Grote Steenweg 8<br/> 
        2440 Geel<br/><br/> 
        Tel.: +32 14 58 08 18<br/> 
        Fax.: +32 14 58 10 84
        <span class="footermail">
            [email protected]
        </span> 
    </div>

    bovernstaande x3
</div>

Je vergeet trouwens ook nog je #footer te sluiten.
:

::SaBeR::

Legacy Member
Ik zal er eens werk van maken de code te kuisen zoals je voorstelt, maar daar ontbreekt me het momenteel aan tijd voor.

Wanneer ik de suggestie van de bovenstaande post probeer (footerblocks weglaten) dan komt de tekst gewoon onder elkaar te staan...


Allemaal bedankt voor de reactie.
:

::SaBeR::

Legacy Member
Ik heb de tekstblokken als volgt naast elkaar gekregen. Dank u voor de hulp
Code: 
    <div id="footerbottom"> 
        <div id="footercontent">
            <div class="footerblock">
                <span class="footertitle"> 
                Van Calster bvba (Geel)
                </span> <br/>
                Grote Steenweg 8<br/> 
                2440 Geel<br/><br/> 
                Tel.: +32 14 58 08 18<br/> 
                Fax.: +32 14 58 10 84
                <span class="footermail">
                [email][email protected][/email]
                </span>
            </div> 
            <div class="footerblock">           
                <span class="footertitle"> 
                Van Calster bvba (Geel)
                </span> <br/>
                Grote Steenweg 8<br/> 
                2440 Geel<br/><br/> 
                Tel.: +32 14 58 08 18<br/> 
                Fax.: +32 14 58 10 84
                <span class="footermail">
                [email][email protected][/email]
                </span>
            </div>   
                <div class="footerblock">           
                <span class="footertitle"> 
                Van Calster bvba (Geel)
                </span> <br/>
                Grote Steenweg 8<br/> 
                2440 Geel<br/><br/> 
                Tel.: +32 14 58 08 18<br/> 
                Fax.: +32 14 58 10 84
                <span class="footermail">
                [email][email protected][/email]
                </span>
            </div>   
            </div>
        </div
    </div>
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan