This question already has answers here:
How do nested vertical margin collapses work?
(3 answers)
Closed 6 years ago.
I'm trying to style the central big part called "jumpotron" which contains "letters" and "h1". When I try to push "letters" or "h1" lower in the central area vertically it moves the whole "jumpotron" together with the background image. Why does that happen? Why it doesn't respect the fact that "letters" is a child of "jumpotron" so it has to move it's margins inside of "jumpotron"? Also is there a better way to create a big image background for the "jumpotron" from the one I used?
Here's the code:
<body>
<header>
<div class="container">
<h2>Trunk Club</h2>
<nav>
<ul>
<li>How it Works</li>
<li>What to Expect</li>
<li>Stylists</li>
<li>Log In</li>
<li><a id="getstarted" href="#">Get Started</a></li>
</ul>
</nav>
</div>
</header>
<div id="jumpotron">
<div id="letters">
<h1>Premium Clothing,<br>
Great Advice,<br>
Zero Work</h1>
</div>
</div>
</body>
</html>
#charset "utf-8";
/* CSS Document */
body {
font-family: 'Source Sans Pro', sans-serif;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
width: 100%;
min-width: 800px;
height: 60px;
background-color: #151e28;
text-transform: uppercase;
}
header h2 {
color: #FFFFFF;
float: left;
margin-top: 15px;
}
nav {
float: right;
margin-top: 5px
}
nav li {
float: left;
list-style: none;
color: #878b85;
margin-left: 20px;
font-size: 12px;
font-weight: bold;
}
nav ul li:nth-child(4) {
border-left: 1px solid #878b85;
padding-left: 15px;
padding-top: 5px;
padding-bottom: 5px;
margin-top: -5px;
}
nav ul li:nth-child(5) {
border: 1px solid #878b85;
padding-right: 20px;
padding-left: 20px;
padding-top: 5px;
padding-bottom: 7px;
margin-top: -5px;
}
#getstarted {
text-decoration: none;
color: #878b85;
}
#getstarted:visited {
color: #878b85;
}
#jumpotron {
width: 100%;
min-height: 670px;
background-image: url(images/Stylist_Product_Exp30-v3.jpg);
background-position: center;
background-size: 100% auto;
}
#letters {
margin-top: 500px;
}
#jumpotron h1 {
color: #FFFFFF;
text-align: center;
font-size: 55px;
}
You have to set the padding on #letters to 500, not the margin
Related
This question already has answers here:
How are the points in CSS specificity calculated
(7 answers)
Closed 4 years ago.
I want to hover the li but it is not working, I did this before and it worked but I don't know why it is not working now
I set background color for li, I want to when it is hover it change
and another question, I set opacity for footer but it affected li background color too!
body {
background-image: url(background.jpg);
background-repeat: no-repeat;
}
footer {
width: 1350px;
height: 200px;
background-color: dimgray;
border-radius: 10px;
opacity: 0.7;
position: absolute;
}
#li1 {
display: inline-block;
list-style-type: none;
margin: 2px;
padding: 20px;
background-color: aqua;
width: 100px;
font-family: Calibri;
font-weight: 700;
}
#ul1 {
margin-left: 50px;
margin-top: 60px;
position: relative;
}
a {
text-decoration: none;
color: black;
display: block;
font-size: 20px;
text-align: center;
}
li:hover {
background-color: chartreuse;
}
<footer>
<ul id="ul1">
<li id="li1">Home</li>
<li id="li1">Categories</li>
<li id="li1">languages</li>
<li id="li1">Contries</li>
<li id="li1">Cities</li>
<li id="li1">Planets</li>
<li id="li1">Seas</li>
<li id="li1">Deserts</li>
</ul>
</footer>
You cant set same id for multi elements. And im not sure what html do if you set ## as href in tag
Change id attr to class attr in li like this:
Class="li1"
Its hover will work
It's to do with how css is prioritised. You give all your lis the same id - bad idea. Make it a class instead, or (as I have done in the snippet), give them neither a class or id, and style using "#ul1 li".
You'll see in the snippet below the hover works:
body{
background-image: url(background.jpg);
background-repeat: no-repeat;
}
footer{
width: 1350px;
height: 200px;
background-color:dimgray;
border-radius: 10px;
opacity: 0.7;
position: absolute;
}
#ul1 li{
display:inline-block;
list-style-type: none;
margin: 2px;
padding: 20px;
background-color:aqua;
width: 100px;
font-family:Calibri;
font-weight: 700;
}
#ul1{
margin-left: 50px;
margin-top: 60px;
position: relative;
}
a{
text-decoration: none;
color: black;
display: block;
font-size: 20px;
text-align: center;
}
#ul1 li:hover{
background-color:chartreuse;
}
<footer>
<ul id="ul1">
<li>Home</li>
<li>Categories</li>
<li>languages</li>
<li>Contries</li>
<li>Cities</li>
<li>Planets</li>
<li>Seas</li>
<li>Deserts</li>
</ul>
</footer>
Use
li:hover {
background-color: chartreuse !important;
}
To override your
background-color: aqua;
Hello everyone I make some navbar just for practice, and what I want is to set the logo straight to the left but I does not know how to do that. Also navbar should be responsive.
Here is the code:
body {
font-family: Helvetica;
padding: 0;
margin: 0;
background-color: #f4f4f4;
font-size: 10px;
}
/* Global */
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
/* Header **/
header {
background: #28292b;
color: #ffffff;
min-height: 50px;
}
header a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
float: left;
margin-top: 5px;
}
header #branding h1 {
display: inline-block;
vertical-align: middle;
}
header nav {
display: flex;
justify-content: center;
margin-top: 20px;
}
header .highlight,
header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover {
color: #cccccc;
font-weight: bold;
}
<header>
<div class="container">
<div id="branding">
<h1>LOGO</h1>
</div>
<nav>
<ul>
<li>ONE</li>
<li>TWO</li>
<li>THREE</li>
<li>FOUR</li>
<li>FIVE</li>
</ul>
</nav>
</div>
</header>
When I resize to mobile phone width hamburger icon will appear and logo should be no more floated on the left. It should be on center.
I hope someone can help me. Thanks :)
This question already has answers here:
Width 100% with white borders around it. WHy?
(2 answers)
Closed 5 years ago.
I faced an issue today when I created the navigation bar I found a space between the screen and the navigation bar,
here's what I'm talking about
I want the navigation bar with full width, no space at all, I tried using width width: 100% but it didn't work.
Here's the code :
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #141414;
height: 80px;
border-radius: 5px;
}
li {
float: right;
display:inline;
list-style-type:none;
}
li a {
font-family: Julius Sans One, Arial;
font-size: 19px;
display: block;
color: white;
text-align: center;
padding: 30px 20px;
text-decoration: none;
}
.logoimg {
height: auto;
margin-left: 150px;
margin-top: 5px;
}
.left {
float: left;
}
<div>
<ul>
<li class="left"><img class="logoimg" src="/images/logo.png"></li>
<li><a>Test 1</a></li>
<li><a>Test 2</a></li>
</ul>
</div>
From the look of it, your navigation bar is full-width. The additional whitespace you are seeing is actually coming from <body>, which adds a margin of 8px by default. You can override this to ensure that your content is flush against the edge of the page:
body {
margin: 0; /* Added */
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #141414;
height: 80px;
border-radius: 5px;
}
li {
float: right;
display:inline;
list-style-type:none;
}
li a {
font-family: Julius Sans One, Arial;
font-size: 19px;
display: block;
color: white;
text-align: center;
padding: 30px 20px;
text-decoration: none;
}
.logoimg {
height: auto;
margin-left: 150px;
margin-top: 5px;
}
.left {
float: left;
}
<div>
<ul>
<li class="left"><img class="logoimg" src="/images/logo.png"></li>
<li><a>Test 1</a></li>
<li><a>Test 2</a></li>
</ul>
</div>
It's important to note that the <body> tag is always present, even when not explicitly written. This can be seen in the snippets here -- note that the original snippet appears to be offset from the edge and the line, whereas this does not, and all I added was an override for body margin.
Hope this helps! :)
What you are experiencing is the default window/page Padding/Margin. You can set this default value to 0 in order to have your full width/height of the page:
body{
margin: 0;
padding: 0;
}
This should correct your problem.
For some reason my navbar is bigger than it's supposed to be. Or atleast I think it's my navbar. Whenever I remove #rect It goes away. What's the problem here?
#tagline {
font-style: italic;
padding-right: 150px;
padding-left: 10px;
}
nav {
background-color: white;
display:flex;
align-items:center;
overflow: hidden;
}
#logo {
padding-top: 8px;
padding-left: 30px;
vertical-align: middle;
}
li, li>a {
text-decoration: none;
list-style-type: none;
color: black;
display: inline-block;
float: right;
padding: 5px 10px 5px 10px;
}
li>a:hover {
background-color: #7bcc1d;
color: white;
}
.active {
background-color: #7bcc1d;
color: white;
}
#main-bg {
background-image: url('https://s15.postimg.org/ra1dhmjkb/main-bg.png');
background-size: 100% 100%;
height: 500px;
margin: 0;
}
#rect {
background-color: white;
position: relative;
top: 50px;
left: 100px;
width: 400px;
height: 400px;
text-align: center;
}
h2 {
padding-top: 15px;
margin-bottom: 0;
}
span {
margin: 0;
}
#enroll_button {
text-decoration: none;
padding: 10px 20px 10px 20px;
background-color: #7bcc1d;
color: white;
}
<nav>
<img src="https://s12.postimg.org/n0yt5tenx/lb_logo.png" id="logo" alt="logo">
<span id="tagline">Live, 1-to-1, flexible and personalized</span>
<ul id="nav-items">
<li>How it Works</li>
<li>Courses</li>
<li>Teachers</li>
<li>Enroll</li>
<li>Login</li>
</ul>
</nav>
<div id="main-bg">
<div id="rect">
<h2>3 Steps to Complete<br>Your High School Foreign<br>Language Requirement</h2><br>
<span><strong>Convenient Scheduling: </strong>Pick lessons<br>to fit your schedule.</span><br><br>
<span><strong>Interactive Courses: </strong>Learn through<br>live, personal lessons.</span><br><br>
<span><strong>Earn Approved Credits: </strong>Earn credits<br>to satisfy high school requirements.</span><br><br>
Enroll in Your Course
</div>
</div>
You haven't set #rect as a block element and the h2 margin is pulling the whole thing down.
#rect h2{margin-top:0;}
That's because of margins which set in user agent stylesheet from the browser. You can link the reset.css and set your desire margins in your own css.
I'm new to HTML and CSS and trying to build my first portfolio website.
I'm having a few difficulties and was wondering if someone could lead me in the right direction. I want my navigation bar to stay fixed so that as you scroll down the page, it doesn't move. BUT all body items aren't aligning properly. I can't seem to get my image, the table, and the objective to align properly.
What I would like to happen:
The image is to the far left of the page, centered, and below the navigation bar
The table aligns right below the image (wherever image is, so is the table)
p.s. the table is just links to my social media accounts
The objective is to the right of the page, next to the image but lots of space between them
The title is above the objective (wherever objective is, so is the title)
In conclusion: to the right of the page should be objective and title, and to the left of the page should be image and table
Problems I'm having:
Title is hidden behind navigation bar
Table, image, and objective won't align properly
Any help would be greatly appreciated, thank you!
HTML
<!DOCTYPE html>
<html>
<head>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<title>FULL NAME</title>
</head>
<body>
<div id="center">
<h1>NAME</h1>
<img src="#"/a>
<table>
<tr>
<td><img src="#"/></td>
<td><img src="#"/></td>
<td><img src="#"/></td>
<td><img src="#"/></td>
<td><img src="#"/></td>
</tr>
</table>
<h4>Objective<h4>
</div>
<div id="navigation">
<ul>
<li>MENU ITEM</li>
<li>MENU ITEM</li>
<li>MENU ITEM</li>
<li>MENU ITEM</li>
<li>MENU ITEM</li>
</ul>
</div>
<div id="footer">
<div id="bottom">
<p> © All Rights Reserved by FULL NAME<span class="em"></span></p></div>
</div>
</body>
</html>
CSS
body {
padding: 0;
margin: 0;
max-width: 960px;
font-family: Verdana, Geneva, Sans-serif;
}
#navigation {
position: fixed;
top: 0;
color: #FFFFFF;
height: 50px;
text-align: center;
width: 100%;
margin: 0;
}
#navigation li {
font-size: 30px;
padding-left: -20px;
padding-right: -20px;
color: white;
text-decoration: none;
font-family: Georgia, Serif, Times;
display: inline;
float: left;
}
#navigation ul {
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
}
#navigation ul li {
width: 20%;
float: left;
color: #00131C;
}
#navigation a:link, a:visited {
color:#FFFFFF;
background-color:#000000;
text-align:center;
padding:6px;
text-decoration:none;
display: block;
}
#navigation a:hover, a:active {
background-color:#FFFFFF;
color: #000000;
}
#circle{
border-radius: 100% 100% 100% 100%;
width: 300px;
height: 300px;
position: center;
}
.center {
font-family: Verdana, Geneva, Sans-serif;
text-align: center;
top: 100px;
float: center;
margin-left: auto;
margin-right: auto;
}
.center img {
float: center;
margin-right: auto;
margin-left: auto;
}
.center p {
text-align: left;
position: relative;
float: right;
font-family: Verdana, Geneva, Sans-serif;
font-size: 30px;
top: -100px;
}
.center p{
width: 50%;
background: #FFFFFF;
border: 5px solid #FFFFFF;
border-radius: 10px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
margin: 0 auto;
padding: 15px 10px 15px 10px;
background: #FFFFFF;
position: top;
}
.center table {
background-color: #FFFFFF;
margin-left: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
position: center;
}
table img {
height: 40px;
width: 40px;
float: center;
position: center:
}
#footer{
clear: both;
position: relative;
bottom: 0;
height: 3 px;
background-color: #FFFFFF;
padding: 0;
}
#bottom p {
color: black;
font-size: 15px;
padding-left: -20px;
padding-right: -20px;
padding-top: 17px;
padding-bottom: 17px;
text-decoration: none;
font-family: Georgia, Serif, Times;
float: center;
position: center;
}
The following are are somethings that are wrong with your code:
Your are using <div id="center"> in your html, however your CSS is referencing the class center
float: center; and position: center; is invalid css to center objects. For more info on how to center objects see http://www.w3.org/Style/Examples/007/center.en.html
I think that you want to something like this http://jsfiddle.net/vAuFA/