I am trying to create a Similar menu to http://getbootstrap.com/examples/navbar-fixed-top/. It looks like each li element is its own box, has width, height and some background color(gray for the active list item).
I cant figure out how to do this in my own navigation. I tried adding height to the list items and a elements but that doesnt keep them inline with the whole header/nav. I dont know if its because Im using pixels mixed with em's or what. I basically want each li to be its own box with a height of that equal to the navigation and a with of some arbitrary value so that when the user hover of the link/list-item a background-color can be applied ect....
Any ideas?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="David Espejo">
<meta name="description" content="Providing small businesses and individuals websites using wordpress">
<meta name="keywords" content="web,design,wordpress,HTML,CSS,PHP">
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- for mobile devices -->
<title>DEdesigns</title>
<script src="html5shiv.js"></script> <!-- allows html 5 styling -->
<link rel="stylesheet" href="normalize.css"> <!-- a modern CSS reset -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<header id="main-header">
<h1>DEdesigns</h1>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
</header> <!-- end #main-header -->
<article id="about-me">
<h1>About Me</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but
also the leap into electronic typesetting, remaining essentially unchanged
</p>
<figure>
<img src="#" width="#" height="#">
<figcaption>An image of myself</figcaption>
</figure>
</article> <!-- end #about-me -->
<article id="gallery">
<h1>My Work</h1>
<div id="gallery-conatiner">
<figure>
<img src="#" width="#" height="#">
<figcaption>SalonSociel website</figcaption>
</figure>
<p>
A descripton of the website. A descripton of the website. A descripton of the website. A descripton of the website.
</p>
<!-- ends first row -->
<p>
A descripton of the website. A descripton of the website. A descripton of the website. A descripton of the website.
</p>
<figure>
<img src="#" width="#" height="#">
<figcaption>JJ and Sons Electric website</figcaption>
</figure>
<!-- ends second row -->
<figure>
<img src="#" width="#" height="#">
<figcaption>Thetwoedgesword website</figcaption>
</figure>
<p>
A descripton of the website. A descripton of the website. A descripton of the website. A descripton of the website.
</p>
<!-- ends third row -->
</div> <!-- ends #gallery-container -->
</article> <!-- end #gallery -->
<article id="services">
<h1>Services</h1>
<ol>
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
</article> <!-- end #services -->
<article id="contact-me">
<h1>Contact Me</h1>
<p>some contact me stuff goes here</p>
</article> <!-- end #contact-me -->
<footer>
<p>This is my fotter</p>
</footer>
</div> <!-- end #container -->
</body>
</html>
CSS CODE:
#container {
width: 100%;
background: lightblue;
border: 1px solid black;
font-size: 1em;
}
#main-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px;
background: black;
color: white;
}
#main-header h1 {
float: left;
margin: 5px 30px;
}
nav ul {
padding-left: 0;
}
nav, nav ul li {
display: inline-block;
}
nav {
background: red;
height: 50px;
}
nav ul li {
border: 1px solid black;
}
nav a {
}
Try the following:
nav ul {
margin: 0;
display: table;
padding-left: 0;
}
nav a {
display: table-cell;
height: 50px;
vertical-align: middle;
}
Through the use of display: table and display: table-cell you simulate a table, which enables you to use vertical-align: middle in order to vertically center your text.
Fiddle
Related
I am doing a basic html course on freecodecamp and I made this work properly. When i tried doing some changes on my own and adding different stuff to it it acted weird. I then decided to delete all my changes and re-launch but then it just didn't look the same as before. I have tried messing with different setups for my articles, tried adding new sections, articles and paragraphs but to me, it seems as if the code doesn't act like it did before. I have not just double og triple but quintuple checked my code to make sure it's identical to the one on freecodecamp and it IS, but it doesn't look the same at all. I don't know if I'm missing something, but if someone could figure out where the problem occurs, maybe i could stop banging my head against my table.
I want the paragraphs to be on the same line and I want my articles to be separated on each line.
Result:
h1,
p,
h2 {
text-align: center;
}
.menu {
width: 80%;
background-color: cornflowerblue;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
body {
background-image: url("Baggrund_2.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
font-family: sans-serif;
}
.på_linje {
display: inline-block;
}
.smag,
.sandwich {
text-align: left;
width: 75%;
}
.pris {
text-align: right;
width: 25%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ProteinRiget</title>
<link rel="stylesheet" href="style.css"
</head>
<body>
<div class="menu">
<header>
<h1>ProteinRiget</h1>
<p>Est. 2027</p>
</header>
</body>
<main>
<section>
<h2>Shakes & Smoothies</h2>
<article class="på_linje">
<p class="smag">John F. Kennedy shake</p>
<p class="pris">50,-</p>
</article>
<article class="på_linje">
<p class="smag">John snow shake</p>
<p class="pris">50,-</p>
</article>
<article class="på_linje">
<p class="smag">John Wayne shake</p>
<p class="pris">50,-</p>
</article>
<article class="på_linje">
<p class="smag">John Cena shake</p>
<p class="pris">50,-</p>
</article>
<article class="på_linje">
<p class="smag">John Mayer shake</p>
<p class="pris">50,-</p>
</article>
</section>
<section>
<h2>Sandwiches</h2>
<article class="på_linje">
<p class="sandwich">John(ny) Depperoni</p>
<p class="pris">60,-</p>
</article>
<article class="på_linje">
<p class="sandwich">John(ny) Bravoioli</p>
<p class="pris">65,-</p>
</article>
<article class="på_linje">
<p class="sandwich">John(ny) Knoxckle</p>
<p class="pris">50,-</p>
</article>
<article class="på_linje">
<p class="sandwich">John(ny) Deluxe</p>
<p class="pris">70,-</p>
</article>
</section>
</div>
</main>
</html>
I want the paragraphs to be on the same line and I want my articles to be separated on each line.
For this, your paragraph needs to be inline-block and the article should be block.
I would need your help to solve this issue.
I am developing a personal project and I created a classic index.html file linked with an external index.css.
I used the css grid to create different inner sections, each page having a different inner grid structure.
So here it is how my index page structure is like:
-top left: div with a logo. The logo is itself an anchor link which redirects to the homepage/landing page;
-top right, next to the logo: div with a navbar, with 3/4 links (about, contact, etc.)
-main page (center): below the two upper divs, I have a main area, covering the whole screen size with some text;
-second page (below center): below the main page, with images and text (you need to scroll down the page);
-bottom: footer.
Now my intention would be to put a background-image which covers only the first 3 sections (logo, navbar and main area), leaving the other areas on their own. They will have a different color and content.
Important is that the background-image should scroll down along with the page and should not remain sticky and fixed in its own position. It is supposed to look like as if it were the background-image of the main page in the center, but it is not.
If I put the background-image only in the main page, then the top divs are imageless and I want the background-image to cover the two upper divs too. If i put the same image into these 3 main divs individually, then I risk the images to overlay and it is quite ugly to see and hard to manage when resizing and with media queries.
Now I am using the css-grid to make it responsive and just plain css. Is there a way to create this type of effect with just css or do I need mandatorily a css framework (bootstrap, etc) or to change the structure differently?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="grid-container">
<!-- LOGO AREA-->
<div class="logo">
<div class="logo">
<img id="logo" src="pic/white_logo.png" alt="logo">
</div>
</div>
<!-- NAVBAR AREA-->
<div class="navbar">
<ul class="nav-list">
<a class="list" href="about.html"><li>about</li></a>
<a class="list" href=""><li>skills</li></a>
<a class="list" href=""><li>contact</li></a>
</ul>
</div>
<!-- MAIN PAGE AREA-->
<div class="main-page">
<h2>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum</h2>
<a id="learn-more-button" href="">LEARN MORE</a>
</div>
<!-- SECOND PAGE -->
<div class="second-page"></div>
<!-- FOOTER -->
<div class="footer"></div>
</div>
</body>
</html>
CSS
* {
margin:0;
padding:0;
}
body {
font-family: Montserrat;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
color:white;
background-image: url(pic/background1.jpg);
}
.grid-container {
display: grid;
grid-template-columns: 0.6fr 1.9fr;
height:150vh;
grid-template-rows: 0.5fr 2.5fr 1.3fr 0.4fr;
gap: 0px 0px;
grid-template-areas:
"logo navbar"
"main-page main-page"
"second-page second-page"
"footer footer";
}
/* LOGO AREA*/
.logo {
grid-area: logo;
}
#logo {
padding:2rem 0 0 2rem;
}
/* NAVBAR AREA*/
.navbar {
grid-area: navbar;
padding-left: 25rem;
padding-top:2.5rem;
}
li {
margin-right: 2.5rem;
display: inline;
list-style-type: none;
}
a {
font-size: 1.2rem;
color:white;
text-decoration: none;
}
/* MAIN-PAGE AREA*/
.main-page {
grid-area: main-page;
}
h2 {
width:50rem;
margin-top:15rem;
padding-bottom: 3.5rem;
margin-left:1.25rem;
}
#learn-more-button {
border:0.063rem solid white;
color:white;
padding:0.938rem;
margin-left:20rem;
}
#learn-more-button:hover{
background-color: white;
color:black;
transition: 0.6s;
}
/* SECOND AREA */
.second-page {
grid-area: second-page;
}
/* FOOTER AREA*/
.footer {
grid-area: footer;
}
I totally appreciate any kind of help and thanks a lot in advance.
i think you have to take that 3 dives in one more div
and to that parent div give the background image and remove background attachment fixed..
try this ..
css (add this style in your code):
.one {
background: url(background1.jpg) no-repeat;
background-size: cover;
}
HTML :
<div class="grid-container">
<div class="one">
<!-- LOGO AREA-->
<div class="logo">
<div class="logo">
<img id="logo" src="pic/white_logo.png" alt="logo">
</div>
</div>
<!-- NAVBAR AREA-->
<div class="navbar">
<ul class="nav-list">
<a class="list" href="about.html">
<li>about</li>
</a>
<a class="list" href="">
<li>skills</li>
</a>
<a class="list" href="">
<li>contact</li>
</a>
</ul>
</div>
<!-- MAIN PAGE AREA-->
<div class="main-page">
<h2>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum</h2>
<a id="learn-more-button" href="">LEARN MORE</a>
</div>
</div>
<!-- SECOND PAGE -->
<div class="second-page"></div>
<!-- FOOTER -->
<div class="footer"></div>
</div>
OUTPUT :
change width of parent and child divs
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 2 years ago.
I have some simple html and css styling and I am creating a site with articles and pictures. I don't understand why my third picture isn't aligned with the other photos. It's slightly higher, though it seems like the same size. How can I get it to to be aligned properly? I don't believe I'm doing anything differently with my third article/picture, so I don't understand why it looks different.
index.html
<html>
<head>
<title>Best News Ever!</title>
<meta charset="UTF-8">
<meta name="description" content="This page is a webpage to learn html">
<meta name="keywords" content="html5,udemy,learn code,">
<meta name="author" content="Reza Zandi">
<meta name="viewport" content="width=device-width, initial=scale=1.0">
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<header id="main-header">
<h1>Best News Ever!</h1>
</header>
<section id="top-stories">
<article>
<div class="article-image" style= "background:url(dog.jpg)" ></div>
<h3>Dog kidnapped by other dog</h3>
<p>California is no stranger to dog nappings, however, this one takes
the puppies cake... read more..</p>
</article>
</section>
<section id="top-stories">
<article>
<div class= "article-image" style="background:url(chocolate.jpg)" ></div>
<h3>Chocolate is actually good for you</h3>
<p>Scientists have discovered a new propery in chocolate this is good for you.
They discovered that... read more...</p>
</article>
</section>
<section id="top-stories">
<article>
<div class= "article-image" style="background:url(cat.jpg)" ></div>
<h3>Cat steals catnip from pet mart</h3>
<p>A cat in Dallas Texas broke into a petsmart and stole the entire supply of catnip they had.
Now that location is struggling to replace the... read more...</p>
</article>
</section>
</body>
<footer>
<br/><br/>
<center>©2017<br/>
<a href='#'>Terms of service</a>
</center>
</footer>
</html>
styles.css
#import url('https://fonts.googleapis.com/css2?family=Sriracha&display=swap');
body h1 {
font-family: 'Sriracha', sans-serif ;
font-weight: 300 !important;
margin-bottom:0px;
padding-bottom: 20px;
border-bottom: 2px solid #000;
}
#top-stories{
width:1000px;
margin:auto;
}
section {
max-width: 33%;
display: inline-block;
}
article img {
max-width:100%;
}
.article-image{
width: 100%;
height: 200px;
background-size: cover !important;
background-position: center !important;
}
There's a few issues going on here, like duplicating an ID. That being said, you can get what you want by adjusting the width and using vertical-align: top;
Fiddle here: https://jsfiddle.net/harcfs0u/40/
<html>
<head>
<title>Best News Ever!</title>
<meta charset="UTF-8">
</head>
<body>
<header id="main-header">
<h1>Best News Ever!</h1>
</header>
<section class="top-stories">
<article>
<div class="article-image" style="background:url(dog.jpg)"></div>
<h3>Dog kidnapped by other dog</h3>
<p>California is no stranger to dog nappings, however, this one takes
the puppies cake... read more..</p>
</article>
</section>
<section class="top-stories">
<article>
<div class="article-image" style="background:url(chocolate.jpg)"></div>
<h3>Chocolate is actually good for you</h3>
<p>Scientists have discovered a new propery in chocolate this is good for you.
They discovered that... read more...</p>
</article>
</section>
<section class="top-stories">
<article>
<div class="article-image" style="background:url(cat.jpg)"></div>
<h3>Cat steals catnip from pet mart</h3>
<p>A cat in Dallas Texas broke into a petsmart and stole the entire supply of catnip they had.
Now that location is struggling to replace the... read more...</p>
</article>
</section>
</body>
<footer>
<br /><br />
<center>©2017<br />
<a href='#'>Terms of service</a>
</center>
</footer>
</html>
#import url('https://fonts.googleapis.com/css2?family=Sriracha&display=swap');
body h1 {
font-family: 'Sriracha', sans-serif;
font-weight: 300 !important;
margin-bottom: 0px;
padding-bottom: 20px;
border-bottom: 2px solid #000;
}
.top-stories {
vertical-align: top;
}
section {
padding: 0;
margin: 0;
max-width: 32%;
display: inline-block;
}
article {}
.article-image {
width: 100%;
height: 200px;
background-size: cover !important;
background-position: center !important;
}
In the section class of CSS file, Try using display property with inline-flex. I am attaching you stackblitz link here.
https://stackblitz.com/edit/js-c9mqfu
section {
max-width: 33%;
display: inline-flex;
}
The reason is that the vertical alignment of inline-blocks is by default at their baseline, which in this case is the last line of your text. To fix that, add vertical-align: top to the CSS for section:
section {
max-width: 33%;
display: inline-block;
vertical-align: top;
}
(And as I wrote in the comments, don't use an ID more than once - use a class instead)
u can know the differ between grid and flex in this link differ between flex and grid
section {
max-width: 33%;
display: inline-flex; // or used display: inline-grid;
}
I just removed extra text in 3rd image p and then your code worked fine
#import url('https://fonts.googleapis.com/css2?family=Sriracha&display=swap');
body h1 {
font-family: 'Sriracha', sans-serif ;
font-weight: 300 !important;
margin-bottom:0px;
padding-bottom: 20px;
border-bottom: 2px solid #000;
}
#top-stories{
width:1000px;
margin:auto;
}
section {
max-width: 33%;
display: inline-block;
}
article img {
max-width:100%;
}
.article-image{
width: 100%;
height: 200px;
background-size: cover !important;
background-position: center !important;
}
<html>
<head>
<title>Best News Ever!</title>
<meta charset="UTF-8">
<meta name="description" content="This page is a webpage to learn html">
<meta name="keywords" content="html5,udemy,learn code,">
<meta name="author" content="Reza Zandi">
<meta name="viewport" content="width=device-width, initial=scale=1.0">
</head>
<body>
<header id="main-header">
<h1>Best News Ever!</h1>
</header>
<section id="top-stories">
<article>
<div class="article-image" style= "background:url(https://i.ytimg.com/vi/MPV2METPeJU/maxresdefault.jpg)" ></div>
<h3>Dog kidnapped by other dog</h3>
<p>California is no stranger to dog nappings, however, this one takes
the puppies cake... read more..</p>
</article>
</section>
<section id="top-stories">
<article>
<div class= "article-image" style="background:url(https://upload.wikimedia.org/wikipedia/commons/7/70/Chocolate_%28blue_background%29.jpg)" ></div>
<h3>Chocolate is actually good for you</h3>
<p>Scientists have discovered a new propery in chocolate this is good for you.
They discovered that... read more...</p>
</article>
</section>
<section id="top-stories">
<article>
<div class= "article-image" style="background:url(https://news.cgtn.com/news/77416a4e3145544d326b544d354d444d3355444f31457a6333566d54/img/37d598e5a04344da81c76621ba273915/37d598e5a04344da81c76621ba273915.jpg)" ></div>
<h3>Cat steals catnip from pet mart</h3>
<p>A cat in Dallas Texas broke into a petsmart and stole the entire supply of catnip they had.
Now that location ... read more...</p>
</article>
</section>
</body>
<footer>
<br/><br/>
<center>©2017<br/>
<a href='#'>Terms of service</a>
</center>
</footer>
</html>
I need help with my contentbox. It was placed right below my header before but then I replaced the font of the title for my webpage in the header and for some reason this caused the content to fall down far below my header although this new font actually takes up even less space than the previous one and I have used the inspect-element on the webpage and nothing is in the way of content other than the box-<div>.
That content is inside of in my HTML so it wouldn’t make sense for the box-<div> to push content down, I think.
#content {
font-size: 16px;
display: inline-block;
margin-left: 30px;
font-family: "Times New Roman", Times;
text-align: center;
background-color: #1A1A1A;
margin: 30px;
width: 730px;
color: #F1F1F1;
float: right;
}
header {
margin: 0 auto;
color: #F1F1F1;
}
#titel {
float: right;
font-size: 70px;
font-family: 'Stalemate', cursive;
padding: 48px;
}
.box {
width: 1000px;
margin: auto;
}
<!DOCTYPE html>
<html>
<head>
<title> Page </title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href="https://fonts.googleapis.com/css?family=Stalemate" rel="stylesheet">
<meta charset="utf-8">
</head>
<body>
<div class="box">
<header>
<img src="#/#.png" alt="#">
<div id="titel">Page</div>
</header>
<aside>
<nav>
<ul>
<li>
#</li>
<li>
#</li>
<li>
#</li>
<li>
#</li>
<li>
#</li>
<li>
#</li>
</ul>
</nav>
</aside>
<div id="content">
<h1>Title</h1>
<p>Text.</p>
<h2>Title</h2>
<div id="img-wrapper">
<div class="img-box">
<img src="#/#.jpg" alt="#">
<p> <b>Text</b> </p>
</div>
<div class="img-box">
<img src="#/#.jpg" alt="#">
<p> <b>Text</b> </p>
</div>
<div class="img-box">
<img src="#/#.jpg" alt="#">
<p> <b>Text</b> </p>
<div>
</div>
</div>
</div>
</div>
</div>
<footer>©Text</footer>
</body>
</html>
I can force this layout with a table, but I think the best practice may be some display/float settings in CSS. I have a header and menu section that are working as desired. Below them are top, middle, and bottom sections that are wrapping ugly. The top section should have an image followed by a block of text. The middle section should have 3 equal blocks of text. The bottom (footer) should have 1 equal block of text. Is there a clean way to do this without stuffing it into a table? Here's what I'm doing so far and as I say it's ugly:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page</title>
<link href="/Content/site.css" rel="stylesheet"/>
</head>
<body>
<header>
<span class="HeaderTitle">My header info</span>
</header>
<nav>
<!-- the menu is working fine -->
</nav>
<main>
<style>
.MyArticle
{
width: 30%;
display: inline-block;
float: left;
margin: 8px;
}
</style>
<div class="jumbotron">
<img src="/Images/Photo.jpg" style="border:solid 1px black; margin-right: 14px;" height="180px" align="left">
<p class="lead">Some text</p>
</div>
<br/>
<section id="MiddleSection">
<span class="MyArticle">
<h2>Current News</h2>
<p>Some text</p>
</span>
<span class="MyArticle">
<h2>Something</h2>
<p>Some text</p>
</span>
<span class="MyArticle">
<h2>Something</h2>
<p>Some text</p>
</span>
</section>
</main>
<footer>
<div>
<br />
<hr />
<p>© 2016 - Steve Gaines</p>
</div>
</footer>
</body>
</html>
Here's one way. You just need to clear your floats, basically. Here's some reading on CSS Floats:
All About Floats
CSS Floats 101
Mysteries of the Float Property
* {
box-sizing: border-box;
}
.jumbotron img {
border: solid 1px black;
margin-right: 14px;
}
#MiddleSection {
clear: left;
margin: 0px auto;
}
.MyArticle {
width: 33%;
display: inline-block;
text-align: center;
background: grey;
}
footer {
clear: left;
text-align: center;
}
<header>
<span class="HeaderTitle">My header info</span>
</header>
<main>
<div class="jumbotron">
<img src="/Images/Photo.jpg" height="180px" align="left">
<p class="lead">Some text</p>
</div>
<br/>
<section id="MiddleSection">
<span class="MyArticle">
<h2>Current News</h2>
<p>Some text</p>
</span>
<span class="MyArticle">
<h2>Something</h2>
<p>Some text</p>
</span>
<span class="MyArticle">
<h2>Something</h2>
<p>Some text</p>
</span>
</section>
</main>
<footer>
<div>
<br />
<hr />
<p>© 2016 - Steve Gaines</p>
</div>
</footer>
Though most people don't usually make content on their websites full-width (expand the Snippet to full screen to see what I mean).
Another way that's better/simpler for modern browsers is to use the Flexbox method (not really an option if you have to support IE8 or IE9, etc.).