website hulp

Status
Niet open voor verdere reacties.

softvieuw

Gebruiker
Lid geworden
15 mrt 2013
Berichten
29
beste,

ik heb website gemaakt. dit is de zogenaamde template:

HTML:
<!doctype html>
<html lang="nl">
<head>
	<meta charset="utf-8" />
	<title> Welcome! </title>
	<link rel="stylesheet" href="./main3.css">
</head>
<body>
	<div id="big_wrapper">
		<header id="top_header">
		<h1>Hi, this is my site ;) </h1> 
		</header>
		<nav id="top_menu">
			<ul> 
				<li>Home</li>
				<li><a href="./contact.html">Contact</a></li>
				<li><a href="./about.html">About</a></li>
			</ul>
		</nav>
	
	<section id="main_section" >
		<article>
			<header>
				<hgroup>
					<h1> Article about good morning raaskdfjlskaf <br>asdfasdf</br>asdfasfdasdfasdf</h1>
					<h2> Good morning article </h2>
					
				</hgroup>
			</header>
			<p>Good morning! this is my article</p>
			<footer>
				<p>-written by martii</p>
			</footer>
		</article>
		<article>
			<header>
				<hgroup>
					<h1>Article about good evening</h1>
					<h2> Good evening (copy article) </h2>
				</hgroup>
			</header>
		
			<p>Good evening! this is my copy article</p>
			<footer>
				<p>Written on 22-9-2014</p>
			</footer>
		</article>
</section>
	<aside id="side_news">
		<h4>News</h4>
		This site is very basic! Without any design 
	</aside>
		
	<footer id="the_footer">
	<p id="test1"> Copyright 321test</p>
	</footer>
	</div>
</body>
</html>

als css heb ik dit:

Code:
*{
	margin: 0px;
	padding: 0px;
}

h1{
	font: bold Tahoma 20px;
}

h2{
	font: bold Tahoma 14px;
}
header, section, footer,aside,nav,article,hgroup{
	display:block;
}
body {
	text-align:center;
}
#big_wrapper{
	border:1px solid red;
	width:1000px;
	margin: 20px auto;
	text-align:left;
}
#top_header {
	background:FFFBCC;
	border: 1px solid red;
	padding:20px

}
#top_menu {
	background:FFFBCC;
	border: 1px solid red;
	color:black;
}
a {
	text-decoration:none;
	color:black;
}

#top_menu li {
	display:inline-block;
	list-style:none;
	padding:7.5px;
	font:bold 14px Tahoma
}
#main_section {
	float: left;
	width:658px;
	margin:30px; /* 720px 280 left*/
}
#side_news {
	float:left;
	width:190px;
	height: auto;
	margin: 30px 0px;
	padding:30px;
	background:#FFFBCC;
	border: 1px solid red;
}
#the_footer {
	clear:both;
	text-align:center;
	padding:5px;
	border-top:2px solid red;
}
article {
	background: #FFFBCC;
	border:1px solid red;
	padding:20px;
	margin-bottom:15px;
}
article footer {
	text-align: right;
}

nu heb je twee artikels en die staan op auto, dus hoe groter hoe groter dat vak is. dit werkt.

ook de aside is auto in hoogte.

maar wat ik wil is dat de aside de hoogte aanneemt van beide articels...

weet iemand hoe dat moet?

mvg martii
 
Beste Martii. Ik ben waarschijnlijk net zo'n grote leek als jij, dus zie mijn opmerkingen in dat licht;)
Eerst een vraag vooraf: Wat ik in jou code zie is dat je slechts één "div" lijkt te hebben gedefinieerd.
Mag je een "div" wel zo definiëren: <aside id="side_news"> of moet je echt het woordje "div" gebruiken? Ik verwacht het laatste.
http://www.sitemasters.be/tutorials/5/1/90/nieuw/Div_element
Als ik code van andere sites bekijk, zie ik ze alleen maar gestructureerd met "div's"
Om overzicht te behouden heb ik voor mezelf alle divjes van mijn eigen pagina in Excel uitgetekend
Opzet webpage 1.jpg
Mss helpt dat je.
Wat je in de rechter marge ziet is dat ik een container om mijn items heb geplaatst. Zo verwacht ik dat jij nog een extra container nodig hebt die zowel om je "articles" als "news" moet vallen. Je kunt dan de hoogte van "news" aan deze container refereren.
Mss kun je deze daarvoor gebruiken: <div id="big_wrapper"> en lukt de rest niet omdat je de "article" blokken niet als "div" hebt gedefinieerd?

Nog een toevoeging: Als je FF als browser gebruikt zou je "Firebug" als plugin kunnen installeren. Dan kun je niet alleen zien welke commandos's overruled worden door hogere hiërarchie, maar kun je ook zelf experimenteren en direct het effect bekijken. Dit moet je dan wel nog handmatig naar je eigen code verplaatsen. Zelf gebruik ik Firebug vooral om e.e.a. te bekijken.
 
Laatst bewerkt:
Kolommen met een float een gelijke hoogte geven. Daar is in de loop der jaren veel over nagedacht en er zijn dus veel creatieve oplossingen bedacht. Misschien kun je hier iets mee. Je vind er allemaal oplossingen voor fluid layouts, maar die kun je omzetten naar vaste pixel waardes als je dat wilt.

Suc6. Have fun.


@veng
De TS is bezig met een html5 pagina. In html5 zijn er een hoop structuur elementen bijgekomen waarvan het gebruik wordt aanbevolen (van mij mag je natuurlijk div gebruiken als je dat prettiger vindt). De <head> sectie van een html5 pagina moet uiteraard dan ook aan de juiste eisen voldoen, zoals de eerste !DOCTYPE regel.
 
Laatst bewerkt:
bron: Zoals ik aangaf ben ik ook leek en drukte me daarom al voorzichtig uit. Mijn pagina is begin 2012 door iemand anders in asp.net opgezet. Ik ga dit bekijken en neem dit als leerelement mee:thumb:
Zijn er argumenten om mijn pagina (http://is.gd/BNnGBf) om te zetten naar HTML5? Ben je bekend met asp.net Ik heb nl. nog een issue met mijn menu's. Dan maak ik een nieuw bericht aan.
 
@veng: Bij het leren van meerdere programmeertalen kom je erachter dat ze allemaal op elkaar lijken. Zelf heb ik geen ervaring met asp, maar de syntax van asp is een typisch Microsoft product, waar veel mensen ervaring mee hebben. Post je vraag even in Programmeren - ASP dan kunnen de Helpmij'ers kijken of we je vraag kunnen beantwoorden.

Volgens de laatste uitspraken van Google levert html5 (nog) geen voordeel op in hun algoritme, maar dat zal binnenkort wel gaan komen. Ga nu niet direct alles ombouwen want dit voordeel ligt in procenten ergens achter de komma. Volgens mij zijn er 2 grote voordelen, namelijk uniformiteit in naamgeving voor de structuur en omdat alle browsers sinds de zomer 2011 html5 en css3 ondersteunen zijn er een hoop nieuwe mogelijkheden bijgekomen die voorheen alleen met scripts te realiseren waren.

Suc6. Have fun.
 
Nog een aanvulling voor allen die met html5 bezig zijn

Wil je in IE8 de html5 structuur elementen ondersteunen (met de werking als een div)
- Download http://modernizr.com/download/
- en zet in de <head> van de pagina
Code:
HTML:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="/map/map/modernizr.js"></script>

CSS:

article, aside, details, figcaption, figure, footer,
header, hgroup, main, nav, section, summary {
  display: block;
}

Opmerking: de "Meta X-UA-Compatible" wordt niet W3C gevalideerd. Je kunt dit in PHP met de volgende code oplossen die je voor de !DOCTYPE plaatst. De Meta in de <head> haal je dan uiteraard weg.
Code:
<?php
if(isset($_SERVER['HTTP_USER_AGENT'])){
  $ua = $_SERVER['HTTP_USER_AGENT'];
  if(strpos($ua,'Trident')!==false || strpos($ua,'MSIE')!==false)
  header('X-UA-Compatible: IE=edge,chrome=1');
}
?>

@veng: Ik weet niet of dit laatste in ASP mogelijk is, dit vond ik ergens, maar ik heb geen idee waar het moet staan.
Code:
<configuration>
  <system.webServer>
     <httpProtocol>
        <customHeaders>
           <add name="X-UA-Compatible" value="IE=edge,chrome=1" />
        </customHeaders>
     </httpProtocol>
  </system.webServer>
</configuration>

Suc6. Have fun.
 
Laatst bewerkt:
bron: Lijkt me geen probleem. De "gewone" afzonderlijke pagina's met content en bevatten ook dan "gewone" html. Verder heb ik nog een template pagina welke als template voor alle pagina's dient (master.master) en een pagina met het echte stukje asp.net (master.master.css). Deze laatste is de pagina waar ik zelf wel uitbreidingen in aan kan brengen, maar niet wezenlijk nieuwe zaken. Dit is ook de pagina waarin mijn menustructuur en overlays worden bepaald (mijn terminologie zal wel niet conform de standaards zijn :eek:)
Alleen even hier als illustratie van wat ik nog op wil lossen: Als je enkele van mijn menuitems uitklapt, wil ik de bij elkaar horende items met kleuren aangeven. Dat lukt ook prima maar ik bega daar een grote zonde: Ik lees met firebug uit welke code asp.net toekent aan de verschillende kleurgebieden. Die code stop ik dan in mijn .css file. Zodra ik iets wijzig aan mijn menu-items, bv. 'n item toevoegen, kent asp.net daar weer andere codes aan toe en moet ik weer handmatig die code opzoeken en aanpassen. Erg onprofessioneel.
 
Je kunt deze vraag het beste als aparte post in Programmeren - ASP zetten denk ik. Het lijkt mij geen html of css vraag, maar een typische asp vraag. Hiermee kan ik je helaas niet helpen.
 
beste,

sorry voor laten antwoord,

maar ik snap het even niet, ik heb die site bekenen^
maar kan niet vinden over die balken.

dat de article's even groot moeten zijn als side_news bedoel ik.

mvg martii
 
Hi softvieuw,
Je kunt in css het (old-time) display : table; gebruiken.
Hieronder een responsive voorbeeld die je zelf verder kunt uitwerken.
Code:
HTML:

<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width">
<title>Welcome!</title>
<link rel="stylesheet" href="main3.css">
</head>
<body>
<div class="layout">
<header class="mainHeader cf">
  Dit is de header
</header>
<nav class="mainNav cf">
  Hier komt het menu
</nav>
<div class="mainContent cf">
  <div class="columns">
    <section class="articles">
      <article>
        consectetur adipiscing elit. Morbi arcu ipsum, suscipit non placerat
        non, egestas et diam. Donec eros mi, viverra et dictum id, vulputate
        vitae leo. Vestibulum pulvinar facilisis fringilla. Praesent est elit,
        feugiat eu tempor sed, condimentum sit amet dui. Nulla facilisi.
        Phasellus sed turpis a erat pellentesque dapibus id ac libero.
      </article>
      <article>
        consectetur adipiscing elit. Morbi arcu ipsum, suscipit non placerat
        non, egestas et diam. Donec eros mi, viverra et dictum id, vulputate
        vitae leo. Vestibulum pulvinar facilisis fringilla. Praesent est elit,
        feugiat eu tempor sed, condimentum sit amet dui. Nulla facilisi.
        Phasellus sed turpis a erat pellentesque dapibus id ac libero.
      </article>
    </section>
    <aside class="aside">
      Lorem ipsum dolor sit amet et, consectetur adipiscing elit. Morbi arcu
      ipsum, suscipit non placerat non, egestas et diam. Donec eros mi,
      viverra et dictum id, vulputate vitae leo. Vestibulum pulvinar.
    </aside>
  </div>
</div>
<footer class="mainFooter cf">
  Dit is de footer
</footer>
</div>
</body>
</html>

CSS:

/*** algemeen ***/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
header, nav, section, article, aside, footer {
  display: block;
}
body {
  font-family: "lucida grande", "lucida sans unicode", arial, sans-serif;
  font-size: 16px;
  line-height: 150%; 
}
.cf:before, .cf:after {content:""; display:table;}
.cf:after {clear:both;}

/*** hoofdindeling ***/
.layout {
  width: 75%;
  margin: 20px auto;
  border: 1px solid #0f0;
}
.mainHeader, .mainNav {
  width: 100%;
  border-bottom: 1px solid #0f0;
}
.mainContent { /* zie onder */
}
.mainFooter {
  width: 100%;
  border-top: 1px solid #0f0;
}

/*** articles en aside ***/
.mainContent {
  display: table;
  border-collapse: separate;
  width: 98%;
  margin: 0 auto;
  border-spacing: 20px 10px;
}
.columns {
  display: table-row;
}
.columns .articles,
.columns .aside {
  display: table-cell;
}
.columns .articles {
  width: 65%;
}
.columns .aside {
  width: 35%;
}

/*** styling articles en aside ***/
.columns .articles article,
.columns .aside {
  margin-top: 20px;
  padding: 10px;
  background: #bdf;
  border: 1px solid #0f0;
}
.columns .articles article:first-child,
.columns .aside:first-child {
  margin: 0;
}
Hiermee zijn <section> en <aside> even hoog. Je kunt bij aside zelfs vertical-align : middle; gebruiken.

Suc6. Have fun.
 
Laatst bewerkt:
Nootje: dit werkt zolang <aside> minder hoog is dan <section>. Met alleen css lukt het niet dat het laatste artikel zich ook nog zal aanpassen aan een te hoge aside. Ik raad dergelijke layouts eigenlijk altijd af. Vroeg of laat kom je in je layout een beperking tegen in het uitwerken.
 
ik had nog klein vraagje, is het mogelijk om alles een achtergrond kleur te geven behalve een item
ik heb nu *{
backgroundcollor: kleur;
}

maar nu komt dat ook tussen de navigatie, dus dat ik zeg overal die kleur behalve in mijn navigatie.

kan dit"?



martii
 
CSS kent een hoop selectors. Hier vind je een complete lijst. De '*' betekent: alle elementen. Het gaat eigenlijk om de volgorde in je stylesheet(s). Zomaar een voorbeeldje:
Code:
body {
  background-color: #bbb;
}
.mainNav {
  background-color: #fff;
}
In dit voorbeeld staat eerst dat alles in body #bbb moet zijn, maar daarna (bij hoofdindeling) zet je dat mainNav #fff moet zijn.

De '*' helemaal bovenaan is een simpele reset voor browsers. Daar zet je geen opmaak bij. Wil je een complete reset, zoek dan even op normalize.css

Suc6. Have fun.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan