Vraag over de inhoud van een extern stylblad

afarensis · 18 apr 2013

Voor mijn site www.lucyonline.nl gebruik ik al jaren een extern stijlblad, styleLucy.css. Onderdeel hiervan is onderstaande selector (ik geloof dat dit zo heet).
nadeel hiervan is dat ik, naast deze code <link rel="STYLESHEET" href="css/styleLucy.css" type= "text/css">, op elke pagina deze class? <div class = 'mijntekstDiv'> erbij moet zetten (Ik begrijp trouwens niet goed waarom dit een 'class' is. Volgens mij begint dat toch altijd met een punt?) Het liefste zou ik dit onderbrengen in de 'bestaande' body- of html-tag binnen het stijlblad. Ik heb wat testjes gedaan, maar dat werkte niet goed. Als het maar herkent wordt door: <link rel="STYLESHEET" href="css/styleLucy.css" type= "text/css">

Je merkt het al: ik heb weinig kennis van css. Jaren geleden heb ik op advies van 'iemand' de 'div.mijntekstDiv' toegevoegd (die op zich goed werkt) maar is verder altijd een raadsel voor mij gebleven.

Ik hoop dat iemand mij hierbij kan helpen. Houd er alsjebleift rekening mee dat ik absoluut geen kenner ben...

}
div.mijntekstDiv {
background : #efe9d0; /* kleur achtergrond middendeel*/
padding : 15px; /* middendeel vergroten/verkleinen*/
border : 1px solid #8A643F; /* bruine rand om middendeel */
margin-left : auto; /* ruimte links rechts vergroten/verkleinen */
margin-right : auto;
min-width : 500px; /* minimale breedte middendeel*/
max-width : 900px; /* maximale breedte middendeel*/
}

glompie · 3 mei 2013

Ik denk niet dat het slim is om die div mijntekstDiv weg te halen. Dus die blijf je nodig hebben als je pagina's bijmaakt.
Als je alle .htm files naar .php om zou zetten kun je code in 1 bestandje zetten en includen in iedere pagina maar dat lijkt me wat hoog gegrepen en je hebt er een lokale http server voor nodig.

<div class="tekst"></div> kun je op 2 manieren schrijven in je css.
Als .tekst{} of als div.tekst{}
Bij jou staat het op de 2e manier.

Zo'n positie div zou eigenlijk een id moeten zijn en dan wordt het #tekst{} maar dat maakt eigenlijk ook niet uit, een class kan ook.

Verder staan er een hoop fouten in je code. Wat ook niet zo'n ramp is maar ik zou wel proberen die div tussen <body> en </body> te plaatsen en niet tussen <head></head>

afarensis · 3 mei 2013

Bedankt voor je reactie en duidelijke uitleg..

Het kleine mysterie rondom de 'div.mijntekstDiv' is nu duidelijk. Je kunt dus gewoon 'div' voor de punt zetten. Had ik zelf niet kunnen bedenken.... En ik laat het dan maar een 'Class'...

En... inderdaad, met PHP werken is wat te hoog gegrepen voor mij. Ooit is met een gastenboek bezig geweest, maar ik verdwaalde al snel in het php-oerwoud. En ik zal eens kritisch naar de opmaak kijken en de fouten eruit 'proberen' te halen.

Misschien mag ik je nog een vraagje stellen: Ik ben een beetje aan het experimenteren met HTML5/CSS. Zo heb ik een paar knoppen in elkaar geknutseld, maar ik krijg ze met geen mogelijkheid gecentreerd.

In stijlblad:
#nav a { 
background-color: #ffffff;
border : solid 1px #804000;
color : #804000;
font-size : 14px;
text-align : center;
text-decoration : none;
padding : 2px 4px 2px 5px;
margin : 5px;
display : block;
float : left;
width : 80px;
height: 15px;
}

In de pagina:
(Ik heb al verschillende combinaties bedacht, maar helaas...)

<div align="center">
<div id="nav">
<a href="../index.html">Home</a>
<a href="JavaScript:CloseIt()">Sluit</a> 
</div>
</div>

George

glompie · 3 mei 2013

Omzetten van htm naar php bestanden kun je (later) wel proberen alleen dat is best veel werk. De code zelf die je nodig hebt is niet zo moeilijk.
Er komt dan ook een .htaccess bij kijken om de oude urls te redirecten naar de nieuwe.

Lijkt me dat je #nav moet centreren, niet #nav a.
Probeer eens dit:

Code:

#nav{
position:relative;
margin:0 auto;
width: en hier de totale breedte van heel de knoppenbalk in px;
}

afarensis · 3 mei 2013

Sorry, ik weet niet wat je bedoelt met:

#nav{
position:relative;
margin:0 auto;
width: en hier de totale breedte van heel de knoppenbalk in px;
}

Ik heb toch al in het stijlblad een aantal opmaak-kenmerken staan? (die op zich prima werken)

#nav a { 
background-color: #ffffff;
border : solid 1px #804000;
color : #804000;
font-size : 14px;
text-align : center;
text-decoration : none;
padding : 2px 4px 2px 5px;
margin : 5px;
display : block;
float : left;
width : 80px;
height: 15px;
}

Overigens; als ik de 'a' bij de identifier weghaal, gaat de opmaak verloren.

Ik moet toch de code in de pagina aanpassen?
<div align="center">
<div id="nav">
<a href="../index.html">Home</a>
<a href="JavaScript:CloseIt()">Sluit</a> 
</div>
</div>

Ik zal voor de de duidelijkheid de url geven. Het is wel een rommeltje... maar het is dan ook om te 'rommelen'...

http://www.lucyonline.nl/excluservice/oefenpagina-3/oefenpagina-3.html

Maar misschien snap ik, als css-dummy, niet goed wat je bedoelt

George

glompie · 3 mei 2013

#nav - is een div
#nav a - is de a binnen die div
nav - is een html5 tag

nav, article en section zijn html5 tags. Heb je dus niks aan als er een xhtml doctype boven staat.
Verder gaat je header buiten de lijnen staan als je de pagina verkleint.
Met onderstaande schaalt deze mee.
Dat grote menu zou ik nooit in javascript zetten ivm indexatie door Google maargoed....
De background van #nav is even green gemaakt.

Probeer hier eens mee:

Code:

<!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>
<title>Over ons</title>

<link type="text/css" href="../css/style_excluservice.css" rel="stylesheet" />

<!--<script language="javascript" type="text/javascript">
function sluitPopup() {
 if(document.getElementById) {
 document.getElementById('bericht').style.display = "none";
 }
 }
 function laatPopupzien(bericht) {
 if(document.getElementById) {
 var x;
 var y;
 x= document.getElementById('tekstbijlinks').offsetLeft;
 y= document.getElementById('tekstbijlinks').offsetTop;
 tekst=''+bericht+'';
 document.getElementById('bericht').style.display = "block";
 document.getElementById('bericht').style.left = x + 140 +'px';
 document.getElementById('bericht').style.top = y - 90 +'px';
 document.getElementById('bericht').innerHTML=tekst;
 }
 }
</script> -->

</head>

<body>
<div class="mijntekstDiv">
<!-- DO NOT MOVE! The following AllWebMenus linking code section must always be placed right AFTER the BODY tag-->
<!-- ******** BEGIN ALLWEBMENUS CODE FOR menu_excluservice ******** -->
<script type="text/javascript">var MenuLinkedBy="AllWebMenus [4]",awmMenuName="menu_excluservice",awmBN="908";</script><script charset="UTF-8" src="../menu_excluservice.js" type="text/javascript"></script><script type="text/javascript">awmBuildMenu();</script>
<!-- ******** END ALLWEBMENUS CODE FOR menu_excluservice ******** -->

<div id="header">
<img class="header_logo" src="../afbeeldingen/banner/banner_hoofdpagina_zwart.jpg" alt="header logo" />
</div> 

<div id="nav">
 <a href="../index.html">Home</a>
 <a href="JavaScript:CloseIt()">Sluit</a>
</div> 

<br />
<p>
Dit is een stukje tekst. Dit is een stukje tekst.Dit is een stukje tekst.Dit is een stukje tekst.Dit is een stukje tekst.Dit is een stukje tekst.Dit is een stukje tekst.Dit is een stukje tekst.Dit is een stukje tekst.Dit is een stukje tekst.Dit is een stukje tekst.Dit is een stukje tekst.Dit is een stukje tekst.Dit is een stukje tekst.Dit is een stukje tekst.Dit is een stukje tekst.Dit is een stukje tekst.Dit is een stukje tekst.Dit is een stukje tekst.Dit is een stukje tekst.Dit is een stukje tekst.Dit is een stukje tekst.Dit is een stukje tekst.Dit is een stukje tekst.Dit is een stukje tekst.Dit is een stukje tekst.Dit is een stukje tekst.Dit is een stukje tekst.
</p>

<br /><br />
<div align="center">
<!--<div id="tekstbijlinks"> -->

<a href="../gebit-van-lucy.htm" onclick="window.open('../gebit-van-lucy.htm','','width=800,height=500'); return false">Gebit van Lucy.</a>

<a href="#" onmouseover="laatPopupzien('Tekst tweede link')" onmouseout="sluitPopup()" onclick="window.open('link2.html','','width=400,height=300'); return false">Link 2.</a></div> 

</div>

<!--<div id="bericht"></div> -->

</body>
</html>

Code:

html {
scrollbar-base-color: #DCDCDC; /* midden grijs */
scrollbar-arrow-color: #ED6B24; /* oranje pijlen */
scrollbar-track-color: #BCBCBC;
scrollbar-shadow-color: #ED6B24; /* oranje border */
}

body{
margin:0;padding:0;
	margin: 5px; /* ruimte bovenkant middendeel (stond eerst apart onder 'html body')*/
	PADDING: 1% 3% 1% 4%;
	FONT-SIZE: 12pt;
	COLOR: #505050; /*kleur tekst */
	BACKGROUND-COLOR: #EBEBEB; /*kleur achtergrond links en rechts, bij lokaal bewerken veranderen van 505050 naar EBEBEB  */
	FONT-FAMILY: sans-serif, arial, georgia, verdana;
	text-align: left; /* was center (stond eerst apart, geldt niet voor pop-ups. apart definieren)*/ 
	overflow-y: scroll; /*om de 'gekleurde' schuifbalk altijd te tonen. Ook als scrollen niet nodig is (stond eerst apart)*/
}


#header{	/* meestal gebruikt voor een kopregel boven een webpagina */
margin-top:5px;
border:2px solid #ED6B24; /*borderrand om middendeel*/
margin-left:auto; /* middenblok naar links verschuiven */
margin-right:auto; /* middenblok naar rechts verschuiven */
min-width : 500px;
max-width : 800px; 
position: relative; 
}


div.mijntekstDiv {
    background	 : #DCDCDC; /*kleur achtergrond middendeel (kan niet naar body?)*/
    text-align   : left;
  	padding   : 5px; 
	  border    : 1px solid #ED6B24; /*borderrand om middendeel*/
    margin-left  : auto; /* middenblok naar links verschuiven */
    margin-right : auto; /* middenblok naar rechts verschuiven */
    min-width    : 500px; /* breedte middenblok */
    max-width    : 800px; /* breedte middenblok */ 
}

#logo{background:orange; height:100px;}


.header_logo{height:100%;width:100%;}

img.rand { /* rand om foto's, class in DW*/
	BORDER-RIGHT: #804000 1px solid; 
	BORDER-TOP: #804000 1px solid; 
	BORDER-LEFT: #804000 1px solid; 
	BORDER-BOTTOM: #804000 1px solid;
}


h1{FONT-SIZE: 20pt; text-shadow: 2px 3px 5px #efe9d0, 3px 3px 3px #696969}
h2{FONT-SIZE: 15pt; BACKGROUND: #dcdcdc; COLOR:red; margin-left:40px; margin-right:40px;}
h3{FONT-SIZE: 10pt; BACKGROUND: #efe9d0; COLOR: #804000; TEXT-ALIGN: center}

.dikkerand{
	border: 1px #ED6B24;
	border-radius:10px 10px 10px 10px;
}

.rondehoeken{
border-radius:20px 20px 20px 20px;
}

nav{
background:green;
} 

section{ /* hierin komt de inhoud van pagina */
background:#ebebeb;
margin-left:60px;
margin-right:60px;
padding: 10px;
margin-top:10px
}

article{background:red;} /* balkje onderin */

.onderlijn {text-decoration: underline;}

.abbr{color:navy; font-weight:bold;} /* popupje, werkt alleen goed (met stippellijn)in Firefox */

#kader-met-schaduw{
 -moz-box-shadow: 10px 10px 5px #888;
 -webkit-box-shadow: 10px 10px 5px #888;
 box-shadow: 5px 5px 5px #888; /*formaat van schaduw*/
 height:100px; width:500px;
 background-color: #EBEBEB;
 }

a:active {
	background: #DCDCDC;
	color: #505050;
}
a:link {
	background: #DCDCDC;
	color: #ED6B24;
}
a:visited {
	background: #DCDCDC;
	color: #505050;
}
a:hover {
	background: #DCDCDC;
	color: #ED6B24;
}

#lay-out-pagina{ /* alternatief voor div.mijntekstDiv, werkt niet!!! */
	background	 : #DCDCDC; /*kleur achtergrond middendeel (kan niet naar body?)*/
    text-align   : left;
	padding      : 05px; 
	border       : 1px solid #ED6B24; /*borderrand om middendeel*/
    margin-left  : auto; /* middenblok naar links verschuiven */
    margin-right : auto; /* middenblok naar rechts verschuiven */
    min-width    : 500px; /* breedte middenblok */
    max-width    : 800px; /* breedte middenblok */ 
} 


#nav{
position:relative;
margin:0 auto;
width:202px;
height:30px;
background-color:green;
}


#nav a {
 background-color: #ffffff;
 border : solid 1px #804000;
 /*border-left : solid 1px #804000;
 border-right : solid 1px #804000;
 border-top : solid 1px #804000;*/
 color : #804000;
 font-size : 14px;
 text-align : center;
 text-decoration : none;
 padding : 2px 4px 2px 5px;
 margin : 5px;
 display : block;
 float : left; /* als je dit weglaat, dan worden de buttons onder elkaar gezet */
 width : 80px;
 height: 15px;
 }

#nav a:hover {
 background-color: #efe9d0;
 border : solid 1px #804000;
 /*border-left : solid 1px #804000;
 border-right : solid 1px #804000;
 border-top : solid 1px #804000;*/
 color : #804000;
 padding : 2px 4px 2px 5px;
}


footer{	
background:#DCDCDC;
clear:both;
margin-top:10px;
text-align:center;
width:825px;
height:50px;
border:0px solid #ED6B24; /*borderrand om middendeel*/
margin-left:auto; /* middenblok naar links verschuiven */
margin-right:auto; /* middenblok naar rechts verschuiven */
}

afarensis · 5 mei 2013

Sorry voor de wat late reactie; mooi weer, visite, en... ik ben toch wel even aan het puzzelen geweest met jouw voorgestelde wijzigingen. Veel knippen en plakken, maar het is gelukt. Mooi!
Moet nog wel even finetunen, maar dat komt wel... Ik heb overigens wel in het css-bestand 'body' en 'html' van plaats verwisseld, anders ben ik de 'oranje' scrollbar kwijt.
Ik wil je hartelijk danken voor de moeite die je genomen hebt, de knoppen zijn gecentreerd en waar ik ook erg blij mee ben, is dat het geheel nu meeschalt. Zier er fraai uit. http://www.lucyonline.nl/excluservice/oefenpagina-3/oefenpagina-3.html

Ik ga nu rustig de nieuwe en gewijzigde codes overbrengen naar mijn website www.lucyonline.nl.

Ik begrijp alleen niet goed wat je bedoelt met "Dat grote menu zou ik nooit in javascript zetten ivm indexatie door Google maargoed...."

het is wel zo dat ik een enorm JavaScript bestand 'popupScript.js' heb waarin geregeld wordt hoe de popups van www.lucyonline.nl in elkaar zitten, die er in de pagina zo uitziet:<a href="JavaScript:CloseIt()"> (de knop 'Sluit' laat het window verdwijnen). Dit script 'popupscript_excluservice.js' ook gekoppeld aan de oefensite, noem ik het maar.
Zie eventueel voorbeeld http://www.lucyonline.nl/wie is lucy/beschouwing.htm en dan klikken op de "Klik hier voor enkele foto's van de bovenkaak van Lucy"

Ik snap heel weinig van dat script. Ik durf het bijna niet te vragen, maar zou je ook nog eens naar dat script kunnen kijken? Alle begrip als je het wel mooi vind zo. Je hebt de nodige moeite al gedaan om me te helpen.

Groet, george

glompie · 5 mei 2013

In Firefox zag ik de custom scrollbar niet. Elke browser heeft weer een andere oplossing voor scrollbars bedacht.
En scrollbars met plaatjes maken kan wel maar lijkt me even niet nodig en een hoop gedoe.

Google volgt gewoon linkjes. Als je ctrl+U drukt heb je de code van je pagina voor je, dat is wat Google leest.
Daar komen geen linkjes in voor van je grote menu. Die van je onderste menu zie je wel staan.
Je maakt het Google dus moeilijk om alle pagina's van de site te volgen en te lezen. Misschien is een html-sitemap iets om te maken in de toekomst.

Ik zou nog even wachten met overzetten want er zit nog een fout in. Als je kleiner schaalt gaat het
ene menu over het andere heen. Probeer maar een div om het grote menu te zetten zodat er verticaal een vaste afstand komt tussen de beide menubalken.

Wat wil je met die popups ik zie geen fout?
Enige wat ik eraan zie is dat de home knop in een nieuw venster opent
<a href="../index.htm" target="_blank"><img src="../plaatjes/pijl-homepage.gif" alt="Naar homepage" border="0"></a>
Kwestie van target="_self" van maken.

afarensis · 6 mei 2013

Aangepaste scrollbar werkt inderdaad alleen in IE. Maar ik vind het toch wel een leuke toevoeging, zo met dezelfde kleuren al de site zelf...

Het niet kunnen vinden met Google vind ik zelf niet zo'n probleem. (Even tussendoor.... wat ik wel leuk vind; als je in Google NL, zoekt naar Lucy, dat ik dan met mijn amateursite op nr. 1 sta. Komt grotendeel omdat de site al zo'n 17 jaar bestaat. Eerste probeerseltje dus gemaakt ten tijde van Netscape en Mosaic!!), maar dat terzijde...
En ja, het grote menu is een beetje eigenwijs. Hoewel ik het zelf heel fijn programma vind: AllWebMenus van Likno, schaalt het menu, zowel horizontaal als verticaal niet mee (vandaar dus de overlappende menuus). Komt omdat je bij het maken een 'vaste' afstand in pixels op moet geven, in mijn geval vanaf boverkant site. Er zit wel een instelling in 'Responsive menu' dat bij het smaller maken de site, van het menu twee rijen zou moeten maken; daar moet ik nog eens goed naar kijken. Divjes helpen dan ook niet,
Overigens is het zo, dat het kleine menu altijd onderin de pagina geplaatst wordt en het dus niet kan conflicteren met het grote menu. Maar fraai is het niet.

Op zich werken de popups goed, maar het bestand 'popupScript.js' beslaat zo'n anderhalf A-4tje, en dat lijkt me wat veel. Maar als jij zegt dat het verder goed is, vind ik het ook prima.

En ik zal target="_blank" veranderen naar target="_self. Prima tip

Oh ja, heb je site even bekeken en ziet er (natuurlijk

fraai uit. Staat nu bij de favorieten en zal het zeker vaker bezoeken!

Nogmaals dank voor alle moeite die je genomen hebt om mij te helpen. Ben er blij mee! en... natuurlijk weer veel bijgeleerd!

Groet, George

glompie · 6 mei 2013

Geen dank! De hobby sites moeten wel een beetje geholpen worden anders staan er straks alleen nog maar shops op het internet.

Heb 't geprobeerd om de menu's uit elkaar te houden maar dat lukte me ook niet goed.
Met een of meer breaks onder het bovenste menu werkt het wel ietsjes beter.

Qua uiterlijk vind ik de mijne nou niet zo fraai. Bij deze: metaaldetectortips.nl heb ik daar meer op gelet.

afarensis · 6 mei 2013

Ja, de site metaaldetectortips.nl is echt prachtig. Perfect kleurgebruik, oogt heel mooi. Is denk ik ,ook los van de opmaak, een enorme klus geweest. Al die data verzamelen, afbeeldingen vrij maken van achtergrond, enz.. enz.. Complimenten!

Nu mijn amateursiteje...
Het schalen gaat inderdaad een beetje moeizaam. van de class: '.header_logo{height:100%;width:100%;}' krijg ik de hoogte niet bijgesteld. Als ik height op 50 zet, blijft de hoogte toch ongewijzigd. Bovendien zijn er niet veel mensen die de site eens even heel smal willen maken, denk ik. Ik zie wel....

De knoppen (klein menu) vindt ik wel een echt succes. Ik ben dan ook begonnen met het toe te passen op lucyonline.nl.
Heeft de volgende voordelen, vind ik:
- veel minder codes, voorheen stond er een enorme brei van (tabel)-codes omheen
- geen plaatjes meer nodig
- werkt (heb ik getest) ook goed in Vista en zelfs in XP
- En omdat het html5 is, kan het nog heel wat jaartjes mee...

Nogmaals dank voor alle moeite...

Groet, George

Vraag over de inhoud van een extern stylblad

afarensis

Verenigingslid

glompie

Gebruiker

afarensis

Verenigingslid

glompie

Gebruiker

afarensis

Verenigingslid

glompie

Gebruiker

afarensis

Verenigingslid

glompie

Gebruiker

afarensis

Verenigingslid

glompie

Gebruiker

afarensis

Verenigingslid

Nieuwste berichten

Wij waarderen jouw privacy