CSS Elementen vastzetten?

Egel007 · 22 jun 2010

Beste forummers,

Ik ben nogmaals tegen een probleem aan gelopen tijdens het maken van mijn website. Op mijn homepage heb ik een vak met het laatste nieuws, en vanuit mijn MySQL-database worden dus vervolgens de laatste 5 artikelen gelezen, die dan geplaatst worden op de homepage.

Alleen sommige artikel-titels zijn twee regels hoog, en als dat zo is klopt er niets meer van de pijltjes en lijntjes die ik erbij heb gemaakt en ook het element eronder verplaatst een stuk naar onder, waardoor mijn gehele layout niet meer klopt. Ter illustratie heb ik hieronder enkele links naar afbeeldingen geplaatst, zodat het misschien wat duidelijker is.

Hoe kan ik er nu voor zorgen dat ook wanneer artikels twee regels hoog zijn, mijn layout mooi blijft (volgende element, pijltjes en lijntjes)?

http://img9.imageshack.us/i/naamloos2pt.png/
http://img514.imageshack.us/i/naamloosps.png/

Bedankt!

defietser · 22 jun 2010

Wat dacht je van een beetje code te posten .Hoe denk je nu dat er een iemand uw vraag kan oplossen zonder maar een regel code te zien ?
Html en css graag en liefst ook online voorbeeld aub
Mvg
Defietser

Egel007 · 22 jun 2010

Sorry. Voor iets wat ik per ongeluk vergeet te posten, komt de reactie erg onvriendelijk over.
Maargoed, een online voorbeeld heb ik helaas nog niet. Ik wil alles al uitgewerkt hebben voor ik de website online zet, dus ben momenteel nog lokaal bezig. Ook hier mijn excuses voor.

Verder post ik alleen wat van toepassing is, qua code (dus images ontbreken ook, maar daarvoor heb ik bovenstaande afbeeldingen gepost).

HTML:

Code:

<!-- LATEST NEWS PHP SCRIPT -->
                <div id="latestnewslinkStyle">
                	<div id="latestnewslink">
                	<?php
					//Connecten met de mySQL database.
						mysql_connect("localhost", "...", "...");
						mysql_select_db("news");
					//Content selecteren van de database, en echo'en.
						$query = "SELECT id, title FROM articles order by id desc Limit 0, 5";
						$uitvoer = mysql_query($query);
						
						while($rijquery=mysql_fetch_array($uitvoer))
						{
							echo '<a href="newsarticle.php?id='.$rijquery['id'].'">'.$rijquery['title'].'</a><br><br>';
						}
					?>
                    </div>
				</div>
                <div class="arrow1"></div>
                <div class="arrow2"></div>
                <div class="arrow3"></div>
                <div class="arrow4"></div>
                <div class="arrow5"></div>
                <div class="horizontalline1"></div>
                <div class="horizontalline2"></div>
                <div class="horizontalline3"></div>
                <div class="horizontalline4"></div>
                
        	
            <!-- LATEST VIDEOS -->
            <div id="latestvideosAchtergrond"></div>
      
      		<!-- GAME PRICEWATCH -->
            <div id="gamepricewatchAchtergrond"></div>

CSS:

Code:

/*[----- LATEST NEWS -----]*/
			#latestnewsAchtergrond{
				background-image:url(../images/latestnews_homepagebackground.png);
				width:230px;
				height:277px;
				margin-top:17px;
				margin-left:10px;
			}
			#latestnewslinkStyle{
				margin-top:-215px;
				margin-left:32px;
				width:210px;
			}
			#latestnewslink a{
				font-family:Arial, Helvetica, sans-serif;
				font-size:13px;
				color:#FFFFFF;
				text-decoration:none;
			}
			#latestnewslink a:hover{
				font-family:Arial, Helvetica, sans-serif;
				font-size:13px;
				color:#FF9900;
			}
			#latestnewsSeemorebutton{
				margin-top:-30px;
				margin-left:17px;
			}
			#latestnewsSeemorebutton ul{
				margin:0;
				padding:0;
				list-style:none;
				width:65px;
				height:25px;
				display:block;
			}
			#latestnewsSeemorebutton li{
				margin:0;
				padding:0;
				float:left;
				line-height:1px;
				font-size:1px;
			}
			#latestnewsSeemorebutton a{
				height:25px;
				display:block;
			}
			#latestnewsSeemorebutton a#seemore{background-image:url(../images/seemorebuttonlatestones.png); width:65px;}
			#latestnewsSeemorebutton a#seemore:hover{background-image:url(../images/seemorebuttonlatestones.png); background-position:-65px -25px;}
			.arrow1{
				background-image:url(../images/arrow1.png);
				width:4px;
				height:7px;
				margin-top:-173px;
				margin-left:20px;
			}
			.arrow2{
				background-image:url(../images/arrow1.png);
				width:4px;
				height:7px;
				margin-top:29px;
				margin-left:20px;
			}
			.arrow3{
				background-image:url(../images/arrow1.png);
				width:4px;
				height:7px;
				margin-top:29px;
				margin-left:20px;
			}
			.arrow4{
				background-image:url(../images/arrow1.png);
				width:4px;
				height:7px;
				margin-top:29px;
				margin-left:20px;
			}
			.arrow5{
				background-image:url(../images/arrow1.png);
				width:4px;
				height:7px;
				margin-top:29px;
				margin-left:20px;
			}
			.horizontalline1{
				background-image:url(../images/horizontalline1.png);
				width:206px;
				height:5px;
				margin-top:-137px;
				margin-left:24px;
			}
			.horizontalline2{
				background-image:url(../images/horizontalline1.png);
				width:206px;
				height:5px;
				margin-top:33px;
				margin-left:24px;
			}
			.horizontalline3{
				background-image:url(../images/horizontalline1.png);
				width:206px;
				height:5px;
				margin-top:30px;
				margin-left:24px;
			}
			.horizontalline4{
				background-image:url(../images/horizontalline1.png);
				width:206px;
				height:5px;
				margin-top:33px;
				margin-left:24px;
			}
			
			/*[----- LATEST VIDEOS -----]*/
			#latestvideosAchtergrond{
				background-image:url(../images/latestvideos_homepagebackground.png);
				width:230px;
				height:293px;
				margin-left:10px;
				margin-top:94px;
			}
		
			/*[----- GAME PRICES -----]*/
			#gamepricewatchAchtergrond{
				background-image:url(../images/gameprices_homepagebackground.png);
				width:230px;
				height:233px;
				margin-left:10px;
				margin-top:11px;
			}

Alvast bedankt, nogmaals.

defietser · 22 jun 2010

Egel007,
Nu geef je html en css waar ik de samengang niet kan volgen.

HTML:

<div class="arrow1"></div>
                <div class="arrow2"></div>
                <div class="arrow3"></div>
                <div class="arrow4"></div>
                <div class="arrow5"></div>
                <div class="horizontalline1"></div>
                <div class="horizontalline2"></div>
                <div class="horizontalline3"></div>
                <div class="horizontalline4"></div>

Vindt nergens die classes terug in uw css .
Sorry zal je moeten teleurstellen kan je niet helpen geraak er gewoon geen wijs uit.
veel suc6
Mvg
Defietser

Egel007 · 22 jun 2010

Sorry, maar die classes staan toch echt overduidelijk ook gewoon in mijn CSS die ik eerder heb gepost. Misschien hebt u de scroller aan de rechterkant van de code over het hoofd gezien.

HTML:
<div class="arrow1"></div>
<div class="arrow2"></div>
<div class="arrow3"></div>
<div class="arrow4"></div>
<div class="arrow5"></div>
<div class="horizontalline1"></div>
<div class="horizontalline2"></div>
<div class="horizontalline3"></div>
<div class="horizontalline4"></div>

CSS:
.arrow1{
background-image:url(../images/arrow1.png);
width:4px;
height:7px;
margin-top:-173px;
margin-left:20px;
}
.arrow2{
background-image:url(../images/arrow1.png);
width:4px;
height:7px;
margin-top:29px;
margin-left:20px;
}
.arrow3{
background-image:url(../images/arrow1.png);
width:4px;
height:7px;
margin-top:29px;
margin-left:20px;
}
.arrow4{
background-image:url(../images/arrow1.png);
width:4px;
height:7px;
margin-top:29px;
margin-left:20px;
}
.arrow5{
background-image:url(../images/arrow1.png);
width:4px;
height:7px;
margin-top:29px;
margin-left:20px;
}
.horizontalline1{
background-image:url(../images/horizontalline1.png);
width:206px;
height:5px;
margin-top:-137px;
margin-left:24px;
}
.horizontalline2{
background-image:url(../images/horizontalline1.png);
width:206px;
height:5px;
margin-top:33px;
margin-left:24px;
}
.horizontalline3{
background-image:url(../images/horizontalline1.png);
width:206px;
height:5px;
margin-top:30px;
margin-left:24px;
}
.horizontalline4{
background-image:url(../images/horizontalline1.png);
width:206px;
height:5px;
margin-top:33px;
margin-left:24px;
}

Toch bedankt.

Egel007 · 23 jun 2010

Is er inmiddels iemand die enig idee heeft hoe ik dit op kan lossen?

defietser · 23 jun 2010

Ben een beetje aan het spelen geweest daar ik geen enkel plaatje heb van uw latest news box heb ik een beetje geimproviseerd.
Je zal het wel zien in de code. Heb voor het gemak een interne stylsheet gebruikt.
Ik weet niet of je er iets zal kunnen mee doen,

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
	margin-top: 30px;
	margin-right: 30px;
	margin-bottom: 30px;
	margin-left: 30px;
}
#latestnews {
	height: auto;
	width: 220px;
	background-color: #666;
}
.arrow1{
	color: #FFF;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
}
.horizontalline1{
	width:180px;
	margin-right: auto;
	margin-left: auto;
	border-top-width: 2px;
	border-top-style: solid;
	border-top-color: #F00;
	padding-bottom: 10px;
}
#latestnews {
	height: auto;
	width: 220px;
	background-color: #666;
}
.menu {
	color: #FFF;
	padding-left: 10px;
	width: 210px;
	height: 15px;
	padding-top: 5px;
}
.menuMarge {
	padding-left: 20px;
}
h3 {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 10px;
	font-style: normal;
	font-weight: bold;
}
-->
</style>
</head>

<body>
<div id="latestnews">
<div class="menu"> <img src="images/arrow.png" width="9" height="9" alt="arrow" /><span class="menuMarge">Testartikel 5</span></div>
<div class="arrow1">Voor iets wat ik per ongeluk </div>
<div class="horizontalline1"></div>


<div class="menu"> <img src="images/arrow.png" width="9" height="9" alt="arrow" /><span class="menuMarge">Testartikel 4</span></div>
<div class="arrow1">Voor iets wat ik per ongeluk vergeet te posten, komt de reactie erg onvriendelijk over.
Maar goed, een online voorbeeld heb ik helaas nog niet.</div>
<div class="horizontalline1"></div>


<div class="menu"> <img src="images/arrow.png" width="9" height="9" alt="arrow" /><span class="menuMarge">Testartikel 3</span></div>
<div class="arrow1">
</div>
<div class="horizontalline1"></div>

<div class="menu"> <img src="images/arrow.png" width="9" height="9" alt="arrow" /><span class="menuMarge">Testartikel 2</span></div>
<div class="arrow1"></div>
<div class="horizontalline1"></div>


<div class="menu"> <img src="images/arrow.png" width="9" height="9" alt="arrow" /><span class="menuMarge">Testartikel 1</span></div>
<div class="arrow1">
Ik ben nogmaals tegen een probleem aan gelopen tijdens het maken van mijn website. Op mijn homepage heb ik een vak met het laatste nieuws, en vanuit mijn MySQL-database worden dus vervolgens de laatste 5 artikelen gelezen, die dan geplaatst worden op de homepage.

<p>Alleen sommige artikel-titels zijn twee regels hoog, en als dat zo is klopt er niets meer van de pijltjes en lijntjes die ik erbij heb gemaakt en ook het element eronder verplaatst een stuk naar onder, waardoor mijn gehele layout niet meer klopt. Ter illustratie heb ik hieronder enkele links naar afbeeldingen geplaatst, zodat het misschien wat duidelijker is.</p>
</div>
<div class="horizontalline1"></div>


</div>
</body>
</html>

Mvg
Defietser

Egel007 · 23 jun 2010

Dankje,

Hiermee wordt wel het probleem met de pijltjes en lijnen opgelost, wanneer ik twee regels heb, maar het element wat er onder staat schuift nog steeds verder naar beneden.

Misschien daarvoor ook enig idee? Die moet zegmaar "vast" staan.

Groet!

defietser · 23 jun 2010

Iets helemaal anders nu spry accordion kan je even bekijken op :
http://www.defietser.net/egel007/latestNews.html

Heb het even online gezet want werkt met javascript. Als het je bevalt neem het van de server of ik mail alles door maar laat iets weten dan haal ik het terug van de server.
Mvg
Defietser

Egel007 · 24 jun 2010

Natuurlijk bedankt, maar ik heb hier natuurlijk vrij weinig aan. Wat ik in de bovenste post heb gezet is slechts een klein deeltje van mijn gehele site, en aan dat met javascript-werkend iets heb ik dan dus totaal niks.

Overigens is mijn probleem nu nog steeds niet opgelost, want echt hulp daarvoor heb ik ook nog niet ontvangen.

Bij voorbaat dank.

CSS Elementen vastzetten?

Egel007

Gebruiker

defietser

Gebruiker

Egel007

Gebruiker

defietser

Gebruiker

Egel007

Gebruiker

Egel007

Gebruiker

defietser

Gebruiker

Egel007

Gebruiker

defietser

Gebruiker

Egel007

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy