Hoe haal ik de enter na een H2 titel weg?

Status
Niet open voor verdere reacties.
T

Tijger81

Gebruiker
Lid geworden
2 jan 2010
Berichten
397
Hallo,
in mijn css heb ik dit staan:
}
.h2 {
color:black;
font-family: Calibri;
font-size: 25px;
}
.text {
color:black;
font-family: Verdana;
font-size: 20px;
}
Maar op de site komt tussen mijn h2 en text een enter en die wil ik weg hebben.
Na de h2 moet de enter kleiner worden of weg. Mijn text bestaat uit een opsomming(ul)

Ik heb al gegoogled en margin-bottom of top:0px geprobeerd maar dat werkt niet
 
Volgens mij is het standaard HTML dat er na een Hx altijd een formfeed volgt.
Deze weghalen tussen H2 en Text is dus volgens mij onmogelijk.

Verder heb ik echt geen idee wat jij met een "Kleinere" enter bedoelt.
Normaal gesproken bestaat een Enter volgens mij uit een line-end + Linefeed (Cr+LF of /n/r). Hoe je deze kleiner wilt maken ? Geen idee.
 
Met kleinere enter bedoel ik de lettergrootte, bijv: 10pt. Balen en stom dat het niet kan. Ziet er lelijker uit zo.
 
Het H(x) element is standaard een block element. Dit betekent dat hij zich tot de volledige wijdte spreid. Je kan dit aanpassen door de display: inline te maken.

Code: 
h1, h2 {
    display: inline;
}

Uitleg over inline en block: http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

http://jsfiddle.net/V7Wcf/ Voorbeeld voor jouw code. Een div element is ook een block element, deze heeft dus ook een display: inline gekregen.

Groeten,
NewbiProgrammer
 
Laatst bewerkt:
Hallo,
Ik heb geprobeerd om je display inline in de css te zetten en dan te testen, maar er veranderd niks.
 
Dan kan het zijn dat de div om je elementen niet over de volledige wijdte spreid. Kan je even een eigen jsfiddle aanmaken met jouw code / relevante code.

Groeten,
Newbi
 
Sorry wist geen raad met jsfiddle.
Maar dit is mijn huidige code. Tussen de H2 en de text zit een te ruimte "Enter" en dat is lelijk. Misschien de code het probleem duidelijk. Let niet op de padverwijzigingen want die heb ik ff een andere naam gegeven ter privacy

html:
<style>
#columns {
width: 1400px;
}
#columns .column {
width: 49%;
padding: 1%;
border: solid 0px #000;
}
#columns .left {
position: absolute;
left:80px;
top:210px;
width:700px;
float: left;
}
#columns .right {
position: absolute;
left:800px;
top:10px;
width:700px;
float: right;
}
</style>
<div id="columns">
<div class="left column">
<Br>
<div class="h2">Werken met de Editor</h2></div>
<div class="text"><ul>
<li><a href="links\handleidingen\123.pdf" TARGET="_blank">123?</a></li>
<li><a href="links\handleidingen\1234.pdf" TARGET="_blank">de Editor?</a></li>
</div>
<Br>
<div class="h2">Werken met de Legenda's</h2></div>
<div class="text"><ul>
<li><a href="links\handleidingen\een legenda in.pdf" TARGET="_blank">een legenda in?</a></li>
<li><a href="links\handleidingen\re kolommen.pdf" TARGET="_blank">met meerdere kolommen?</a></li>
<li><a href="links\handleidingen\stijl aan.pdf" TARGET="_blank">stijl aan?</a></li>
</div>
<Br>
<div class="h2">Problemen met Layout</h2></div>
<div class="text"><ul>
<li><a href="links\handleidingen\in de Layout.pdf" TARGET="_blank">in de Layout?</a></li>
<li><a href="links\handleidingen\uit de layout.pdf" TARGET="_blank">uit de layout?</a></li>
</div>
</Br>
<div class="h2">Interpoleren met Spatial Analyst</h2></div>
<div class="text"><ul>
<li><a href="links\handleidingen\tgt.pdf" TARGET="_blank">Hoe in?</a></li>
</div>
</Br>
<div class="h2">Maken van een PDF</h2></div>
<div class="text"><ul>
<li><a href="links\handleidingen\wwee.pdf" TARGET="_blank">Hoe maak?</a></li>
</ul>
</div>

<div class="right column">
<div class="h2">Overig</h2></div>
<div class="text"><ul>
<li><a href="links\handleidingen\gbgh.pdf" TARGET="_blank">een afbeelding?</a></li>
<li><a href="links\handleidingen\op schaal in AutoCad.pdf" TARGET="_blank">op schaal in ?</a></li>
</div>
</Br>
<div class="h2">Oefechten</h2></div>
<div class="text"><ul>
<li><a href="links\handleidingen\sopdracht\ TARGET="_blank">dracht</a></li>
<li><a href="links\handleidingen\arcgis\Brabant\" TARGET="_blank">dracht Brabant</a></li>
</ul>
</div>
</div>
</div>


css:
}
.Infotekst {
position: relative;
align: center;
top: 230px;
color:white;
font-family: Verdana;
font-size: 25px;
}
.Kop {
position: Absolute;
left:60px;
top:185px;
color:darkblue;
font-family: Verdana;
font-size: 33px;
}
.h2 {
color:black;
font-family: Calibri;
font-size: 25px;
display: inline;
}
.text {
color:black;
font-family: Verdana;
font-size: 20px;
display: inline;
}
 
Laatst bewerkt:
In jouw geval kan je de div om het ul element verwijderen en de klasse op het ul (lijst) element zetten. Ik heb een beetje margin toegevoegd voor de uitlijning van de bullets.

Code: 
.text {
color:black;
font-family: Verdana;
font-size: 20px;
display: inline;
} 

.text li {
    margin-left: 20px;
}

Stukje uit je html:
Code: 
<div class="h2">Werken met de Editor</h2></div>
<ul class="text">
<li><a href="links\handleidingen\123.pdf" TARGET="_blank">123?</a></li>
<li><a href="links\handleidingen\1234.pdf" TARGET="_blank">de Editor?</a></li>
<br>

http://jsfiddle.net/dfRrS/2/

Over jsfiddle. Het is een makkelijke tool om even snel een test-projectje op te zetten of te laten zien wat je bedoeld. Er zijn drie vakken: links boven voor html, links onder voor javascript en rechts boven voor css. In het vak rechts onder komt dan het resultaat (na het klikken op run bovenin het menu). :)

Groeten,
newbi
 
Ik zag dat ik een kleine foutje had gemaakt. De css moet natuurlijk wel op het h2 element worden toegevoegd, niet een klasse met de naam h2 (een punt in css definieert een klasse) :) Mijn excuses.

voorbeeld html: (per ongeluk had ik een stukje div laten staan in het vorige voorbeeld)
Code: 
<h2>Werken met de Editor</h2>
<ul class="text">
<li><a href="links\handleidingen\123.pdf" TARGET="_blank">123?</a></li>
<li><a href="links\handleidingen\1234.pdf" TARGET="_blank">de Editor?</a></li>
<Br>


voorbeeld css (ik heb de punt voor h2 weggehaald).
Code: 
h2 {
color:black;
font-family: Calibri;
font-size: 25px;
display: inline;
}
.text {
color:black;
font-family: Verdana;
font-size: 20px;
display: inline;
} 

.text li {
    margin-left: 20px;
}

Voorbeeld: http://jsfiddle.net/dfRrS/3/

Groet,
NewbiProgrammer
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan