I am making a Website and I wondered how to make onle sapce between certain links smaller because I need some smaller some bigger.
Thanks in advance
<a class="sub-btn">Aktionen<i class="fas fa-angle-right dropdown"></i></a>
<div class="sub-menu">
Känguru der Mathematik
Der EKS stellt sich vor
101 neue FünftklässlerInnen
Müllsammelaktion
Tag der Handschrift
Mathematikwettbewerb 2021 Runde 2
Begrüßung der 5. Klässler
Sommercamp 2022
Ferien-/Tage
Klassenrat
Schülerparlament
Leseförderung
Beruforientierung
Imagefilm
Materialliste
</div>
First, you have to specify which ones you want to make bigger and which one smaller, because it is important but in general, you can use pseudo selectors to make it happen:
.sub-item {
display: block;
}
.sub-item:is(:nth-child(2), :nth-child(3), :nth-child(6), :nth-child(11)) {
font-size: 1.5rem;
color: red;
}
<div class="sub-menu">
Känguru der Mathematik
Der EKS stellt sich vor
101 neue FünftklässlerInnen
Müllsammelaktion
Tag der Handschrift
Mathematikwettbewerb 2021 Runde 2
Begrüßung der 5. Klässler
Sommercamp 2022
Ferien-/Tage
Klassenrat
Schülerparlament
Leseförderung
Beruforientierung
Imagefilm
Materialliste
</div>
Also, there are a lot of ways to do this, and this is one of them.
You can use :where() either.
Related
EDIT: Solved it. I had to change from the tag html to body { background. Thank you for your help everyone
I've searched on here and on google but I only get the opacity example, if I use opacity 0 then the text disappears too.
I have a html background meaning the complete page and in the code I've placed a div with a h1 and p tag with some text and then a white box-like background around the div of the text appears and I can't remove it.
<div class="container">
<div class="header-pris">
<h1>Pris alternativ:</h1>
<p>Skulle du vilja pröva enstaka timmar eller kanske tom mer timmar än vad som anges nedan så går det självklart också att annordna, kontakta oss direkt på
info#mail.se</p>
</div>
</div>
.header-pris {
text-align:center;
background-color:none;
}
tried with none as color but that doesn't do it so I don't know where I'm doing wrong or what the correct command should be to have no background on the div with the text so that you can see the image background
I don't think it's background-color:none; a valid property. Try using
background-color: transparent;
Text doesnt have a default background-color, it might be being set somewhere else in your CSS, use a property inspector in a browser to check which styles are applied
body {
background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
}
.header-pris,.header-pris-2 {
text-align:center;
}
.header-pris-2 p {
background-color: white;
}
<body>
<div class="container">
<div class="header-pris">
<h1>Pris alternativ:</h1>
<p>Skulle du vilja pröva enstaka timmar eller kanske tom mer timmar än vad som anges nedan så går det självklart också att annordna, kontakta oss direkt på
info#mail.se</p>
</div>
<div class="header-pris-2">
<h1>Pris alternativ:</h1>
<p>Skulle du vilja pröva enstaka timmar eller kanske tom mer timmar än vad som anges nedan så går det självklart också att annordna, kontakta oss direkt på
info#mail.se</p>
</div>
</div>
</body>
Just because this is another way of doing it.
You can use background-color: rgba(0,0,0,0);
The a is for alpha, it sets the opacity.
But the background-color: transparent; is the way to go.
Don't worry Nalin, I upvoted your answer since it is more correct :)
Nalin is correct, background-color: none is not valid. You also need the closing curly brace.
.header-pris {
text-align:center;
background-color: none; /* W3 will display error */
}
.header-pris {
text-align:center;
background-color: transparent; /* Use this instead */
}
Like Nalin said, I think you should do background-color:transparent;.
I've almost finished a website, but encounter a huge issue with chrome on android. Stock browsers work fine, but chrome is messing with my text size. My h4 should be 24px, the paragraph 14px. Though, on chrome mobile the text is increased many steps.
I encountered giving a specified height for the results in the original text size (as in the first section where the id="fotostyle" has a height of like 500px).
Is there another way around this problem? Don't want to give ALL my sections on the website fixed heights ;).
Thanks for your ideas! :D
Menno
Image to show the wrong result <<
<section class="box welcomeBox" id="fotoStyle">
<h4> Fotografiestijlen </h4>
<p class="contentBlockSubTitle"> Diverse fotografiestijlen kunnen gebruikt worden. De meeste ouders stellen portretfoto's op prijs, omdat ze deze meestal niet zelf kunnen maken. De foto's in creatieve stijl worden meestal zelf gemaakt. De keuze wordt dan ook altijd in overleg met de schoolleiding gemaakt.</p>
<div> ...............
<section class="box accordeonBox">
<h4> Afhandeling foto's </h4>
<p class="contentBlockSubTitle"> Wij bieden 4 mogelijkheden om een fotopakket te bestellen. Neem voor vragen graag contact met ons op.</p>
<div class="accordion"> .........
.box {
background-color: white;
padding: 50px;
border-radius: 3px;
box-sizing: border-box;
-moz-box-sizing: border-box;
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.27);
}
.welcomeBox {
width: 100%;
padding-top: 26px;
margin-top: 36px;
}
Hmm interesting, looking at your html the only difference between the first (OK) and second (NO) section seems the id="fotoStyle" part. Might this effect the OK paragraph?
Try looking what happens if you add that ID to the second as well section and you might find the source of the smaller text.
Comment if you still havent found the problem!
I'm trying to get a title and text into one paragraph. The title, however, should have another font than the text. I could get it to work using a lot of <div>'s but it's hard to do it that way. I'm looking to do it without a lot of <div>'s but i figured it might be impossible without any <div>'s. Here's my code:
<div class="blue">
<p class="font2">
Bits
</p>
<br>
<p class="font1">
Een bit is een kleine schakelaar die open of gesloten is.
De bit krijgt de waarde 1 of 0 als de schakelaar open of gesloten is.
De enen en nullen kunnen worden gezien als ja en nee of aan en uit.
Computers gebruiken deze waarden om informatie op te slaan en te lezen.
</p>
</div>
Thanks for your help!
I'd also like to ask another question:
#menu1 a {display: block; background-color: #0066FF; text-decoration: none; font-family: calibri; font-size: 20px; color: #FFFFFF; padding: 5px 5px;}
#menu1 a:hover {background-color: #0088FF}
#menu1 li {display: inline-block;}
#menu1 ul {list-style: none; text-align: center; margin: 0 auto; padding:0px;}
Here's my code. I'm trying to get it all under one #menu1 Because i'm working with multiple menu's and i don't want to lose my overview.
Thanks for your help!
Try this simple method using span
best way to add class to text is using <span> and to change style use font-family:
.bold {
font-family: cursive
}
.italic {
font-family: fantasy
}
.underline {
font-family: monospace
}
.italic {
font-family: serif
}
<div class="blue">
<p class="font2">
Bits
</p>
<br>
<p class="font1">
<span class="bold">Een bit is een kleine schakelaar die open of gesloten is.</span>
<span class="italic">De bit krijgt de waarde 1 of 0 als de schakelaar open of gesloten is.</span>
<span class="underline">De enen en nullen kunnen worden gezien als ja en nee of aan en uit.</span>
<span class="boldit">Computers gebruiken deze waarden om informatie op te slaan en te lezen.</span>
</p>
</div>
You'll probably have much better luck with slightly-reworked HTML, to improve the structure. For example:
<h2>Bits</h2>
<p>
Een bit is een kleine schakelaar die open of gesloten is.
De bit krijgt de waarde 1 of 0 als de schakelaar open of gesloten is.
De enen en nullen kunnen worden gezien als ja en nee of aan en uit.
Computers gebruiken deze waarden om informatie op te slaan en te lezen.
</p>
The h2 should be at whatever level is appropriate.
Now, you can style that as you wish by targetting the h2 and the p. If you want them grouped, for semantic reasons, you can wrap both in a section element. Otherwise, if you wish to style each separately from other h2 / p elements in your document, you can apply a class to each.
Now, what styles do you wish to apply to each element? As an example, you can start with:
h2 { font-family: sans-serif; }
p { font-family: serif; }
Based on another answer, and the title of this question, would it be correct to say you want each sentence in the paragraph to have potentially different styles?
Just wrap your text in a span and add a class it's inline by default and won't break your lines:
<p>some text <span class="font1">with a headline</span> and some other text in the same paragraph with <span class="font2">another headline</span></p>
I don't know if you have your styles in an external stylesheet, at this point I'm assuming not, so in you head tag put:
<style>
.font1{
font-family:arial /* put whatever font you want here */
}
.font2{
font-family:helvetica /* put whatever font you want here */
}
</style>
you should externalize your styles if you aren't, and I'd look into using h1, h2, h3 tags etc instead of p elements for titles
I have created a simple, dynamic page using Bootstrap. It has a sticky nav bar as well as a sticky footer.
I have the navbar, footer and page content to be black.
I want the main content area to be white & the sides of page black as per
background.
I can only achieve this at the moment, by setting a physical height, not by using height:100%;
Could someone please help by looking at my existing code, to see what I am doing wrong.
I don't think I am using the 'div push' idea properly either, as I can see the white push box on the page.
<div id="push"></div>
Picture of desired Result - when content is larger than page, user will scroll but footer always sticky. I believe this will already work.
JSFiddle of my code
Bootstrap Sticky Footer with Sticky Nav Code
I would like to suggest a simpler approach. Look carefully at the CSS, especially the position:fixed property/value.
If you add more content or make your window smaller, you will see it scrolls as desired. This is a simplified version of what I found here.
<html>
<head>
<title>Fixed Footer</title>
<style type="text/css">
body{ margin:0px; padding:0px;background:black}
#maincontent{
width:500px;
background:#fff;
padding:20px 20px 0px 20px;
margin:0px auto;
}
#footer{
position:fixed;
left:0px;
bottom:0px;
width:100%;
background:#990000;
line-height:30px;
color:#fff;
}
#footer span{padding-left:20px;}
</style>
</head>
<body>
<div id="maincontent">
<h1>Fixierter Footer, nur mit CSS</h1>
<p>Das Folgende Script macht genau das, nur halt im CSS alleine.</p>
<p>Das Folgende Script macht genau das, nur halt im CSS alleine.</p>
<p>Das Folgende Script macht genau das, nur halt im CSS alleine.</p>
</div>
<div id="footer"><span>Ich bin Footer, der immer hier unten bleibt :-)</span></div>
</body>
</html>
I think the push goes right before the footer, and doesn't need a specific height set in the CSS..
http://jsfiddle.net/ugeVP/
Hi so I am fading my iframe into the page:
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$("#doneimg").fadeIn(500);
});//]]>
</script>
<div style="display: none;" id="doneimg">
<iframe src="http://om-p.com" width="90%" height="400" name="SELFHTML_in_a_box">
<p>Ihr Browser kann leider keine eingebetteten Frames anzeigen:
Sie können die eingebettete Seite über den folgenden Verweis
aufrufen: SELFHTML</p>
</iframe>
</div>
but the problem is that the page loads like if there were no element
so the page length is very small and as soon as the frame has started to fadein increases.
So how can I make the page not change its length but rather have it constant fromt he start?
First, change display: none; to visibility: hidden:
<div style="visibility: hidden;" id="doneimg">
Then animate the opacity:
$("#doneimg").css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0}, 500);
(Since the ordinary show and fadeIn are using the display they won't "work" anymore)
Live test case.