I have a HTML page like below:
<div id="header-wrapper">
<header class="header" id="header" role="banner">
<div class="logo-slogan-wrapper">
<a href="/d7/" title="Home" rel="home" class="header__logo" id="logo">
<img src="http://localhost/d7/sites/all/themes/zensub/logo.png" alt="Home" class="header__logo-image" />
</a>
<div class="header__name-and-slogan" id="name-and-slogan">
<h1 class="header__site-name" id="site-name">
<span>D7</span>
</h1>
</div>
</div>
<div class="header__region region region-header">
<div id="block-menu-block-1" class="block block-menu-block first last odd" role="navigation">
<div class="menu-block-wrapper menu-block-1 menu-name-main-menu parent-mlid-0 menu-level-1">
<ul class="menu">
<li class="menu__item is-active is-leaf first leaf active menu-mlid-218">Home</li>
<li class="menu__item is-leaf leaf menu-mlid-315">About</li>
<li class="menu__item is-leaf leaf menu-mlid-316">Contact</li>
<li class="menu__item is-leaf last leaf menu-mlid-317">Prestashop News</li>
</ul>
</div>
</div>
</div>
</header>
</div>
And my CSS is :
#header-wrapper{
background:#F7F7F7;
width:100%;
}
#header{
width:1150px;
margin:0 auto;
}
.logo-slogan-wrapper
{
display:inline;
background:#555;
}
.header__region
{
display:inline;
background:#99CC33;
}
#logo,#name-and-slogan,#site-name,#site-slogan
{
display:inline;
}
.menu-block-wrapper{
float:left;
padding:10px 0;
}
.menu li{
display:inline;
list-style:none;
margin-left:10px;
I was expecting the name,slogan and the menu to be inline. But instead , the menu is not coming inline and the background:#99CC33; for div header__region is not changing to the desired background color ! How can I overcome these problems ?
Depending on what you're going for:
.header__region {
float:left;
// or right
}
or
.header__region {
display: inline-block;
}
Related
I'm new to frontend design, around 2 months. I'm having a problem that I can't remove the white spaces between the HTML li tags
Please take a look at my snippet:
ul {
width:100%;
}
ul li {
list-style-type:none;
width:100%;
}
.shop-now {
display:block;
position:relative;
top:-121px;
background-color:white;
width:42%;
height:30%;
}
.shop-now > * {
display:inline-block;
}
.shop-now > h3 {
}
<ul>
<li>
<img src='http://via.placeholder.com/356x150' />
<div class='shop-now'>
<h3>Category 1</h3>
<span>Shop Now</span>
</div>
</li>
<li>
<img src='http://via.placeholder.com/356x150' />
<div class='shop-now'>
<h3>Category 2</h3>
<span>Shop Now</span>
</div>
</li>
<li>
<img src='http://via.placeholder.com/356x150' />
<div class='shop-now'>
<h3>Category 3</h3>
<span>Shop Now</span>
</div>
</li>
</ul>
I want to get rid of these space between the HTML li tags.
How do I do that? Please advise.
the gap is because you are shifting the .shop-now div upward 121px, the div will still take the space even though you have shifted its position.
therefore you need absolute positioning, so that it does not take up space.
ul {
width:100%;
}
ul li {
list-style-type:none;
width:100%;
position: relative;
}
ul li img{
display: block;
}
.shop-now {
display:block;
position:absolute;
top:0;
background-color:white;
width:42%;
}
.shop-now > * {
display:inline-block;
}
.shop-now > h3 {
}
<ul>
<li>
<img src='http://via.placeholder.com/356x150' />
<div class='shop-now'>
<h3>Category 1</h3>
<span>Shop Now</span>
</div>
</li>
<li>
<img src='http://via.placeholder.com/356x150' />
<div class='shop-now'>
<h3>Category 2</h3>
<span>Shop Now</span>
</div>
</li>
<li>
<img src='http://via.placeholder.com/356x150' />
<div class='shop-now'>
<h3>Category 3</h3>
<span>Shop Now</span>
</div>
</li>
</ul>
As shown in this JSFiddle, to remove the spacing around the <li>, include this style rule
li {
margin: 0
}
Hope that helps!
I'm trying to make my li elements stay on the same line but they won't (they are aligning horizontally but that's about it)
Code is as follows:
<footer>
<div class="container">
<div id="coisas"
class="col-6">
<div class="row">
<ul class="col-6">
<li class="col-1"><img src="icon-behance.png"></li>
<li class="col-1"><img src="icon-behance.png"></li>
<li class="col-1"><img src="icon-behance.png"></li>
</ul>
</div>
<div id="nothing"
class="col-6">
</div>
</div>
</footer>
And here is the CSS:
#coisas {
float: right;
bottom: 0;
position: absolute;
size: 50%;
left: 0;
padding-left: 5%;
padding-right: 5%;
}
#nothing {
size: 50%;
right: 0;
}
To achieve expected result, use below option
#coisas ul li{
display:inline;
}
Codepen- https://codepen.io/nagasai/pen/vmdYNg
I'm not sure what you're trying to do, but Bootstrap col's should always be inside row..
<footer>
<div class="container">
<div class="row">
<div id="coisas" class="col-6">
<ul class="row list-unstyled">
<li class="col-1"><img src="//placehold.it/40"></li>
<li class="col-1"><img src="//placehold.it/40"></li>
<li class="col-1"><img src="//placehold.it/40"></li>
</ul>
<div id="nothing" class="col-6">
</div>
</div>
</div>
</div>
</footer>
http://codeply.com/go/ArVyBK4VU5
Tried your problem, resolved it now you can check it here!
#coisas ul li{
display:inline;
}
Demo
The float property specifies whether or not a box (an element) should float.
If you float the li elements to the left, they will lineup in same line.So to put them on one line you can use this:
#coisas ul li{
list-style-type:none;
float:left;
}
The list-style-type:none; property is only for removing the bullet points of the list items.
You can learn more about the css float property here: https://www.w3schools.com/cssref/pr_class_float.asp
I'm having trouble with putting my navigation bar on the left side of my simple webpage. It must be below the header section. This is the Whole HTML Code.
<html>
<head>
<title>My Homepage</title>
</head>
<style>
#header{
width:800px;
height:200px;
background-color:yellow;
}
#footer{
width:800px;
height:100px;
background-color:red;
clear:both;
}
#nav{
width:200px;
height:400px;
background-color:pink;
float:left;
}
#con{
width:800px;
height:400px;
background-color:gray;
}
</style>
<body>
<div id=external>
<div id=header><b>SAMPLE HEADER<b> <img src="kappa.gif"alt="kappa"height="50"width="50"></div>
<div id=con><iframe name=container width=100% height=100% src=default.html></iframe></div>
<div id=footer><b>PUP COPYRIGHT 2016<b> <img src="pup.jpg"alt="pup"height="50"width="50"></div>
<div id=nav>
<ul>
<li><a href=AboutUs.html target=container>About Us</a></li>
<li><a href=ContactUs.html target=container>Contact Us</a></li>
</ul>
</div>
I'm having trouble with putting my navigation bar on the left side of my simple webpage. It must be below the header section.
Your CSS will actually work perfectly if you move your nav markup up to be directly below your closing header div:
<div id=external>
<div id=header><b>SAMPLE HEADER<b> <img src="kappa.gif"alt="kappa"height="50"width="50"></div>
<div id=nav>
<ul>
<li><a href=AboutUs.html target=container>About Us</a></li>
<li><a href=ContactUs.html target=container>Contact Us</a></li>
</ul>
</div>
<div id=con><iframe name=container width=100% height=100% src=default.html></iframe></div>
<div id=footer><b>PUP COPYRIGHT 2016<b> <img src="pup.jpg"alt="pup"height="50"width="50"></div>
Please refer the code to make it
#nav {
width: 100%;
height: auto;
background-color: pink;
float: left;
}
<div id=external>
<div id=header><b>SAMPLE HEADER<b> <img src="kappa.gif"alt="kappa"height="50"width="50">
<div id=nav>
<ul>
<li><a href=AboutUs.html target=container>About Us</a></li>
<li><a href=ContactUs.html target=container>Contact Us</a></li>
</ul>
</div>
</div>
<div id=con><iframe name=container width=100% height=100% src=default.html></iframe></div>
<div id=footer><b>PUP COPYRIGHT 2016<b> <img src="pup.jpg" alt="pup" height="50" width="50"></div>
</div>
I have (jsfiddle):
<body>
<div id="navbar">
<ul class="nav">
<li class="nav_left"><a class="nav" href="#">Home</a></li>
<li class="nav_left"><a class="nav" href="#">Support</a></li>
<li class="nav">
<form class="nav" method="post" action="action.php?do=search">
<input class="search_bar" type="text" name="search_input" />
</form>
</li>
<li class="nav_right"><a class="nav" href="#">Login</a></li>
<li class="nav_right"><a class="nav" href="#">Register</a></li>
</ul>
</div>
</body>
And I have:
html, body {height:100%;margin:0;padding:0;font-size:12px;}
body {background:#F1F1F1;}
#navbar {
width:100%;
padding:5px 0;
overflow:auto;
background:#34495e;
border-bottom:solid 1px #222;
text-align:center;
}
ul.nav {
margin:0;
padding:0;
list-style-type:none;
}
li.nav_left, li.nav_right, li.nav {padding:0 5px;}
li.nav_left {float:left;}
li.nav_right {float:right;}
li.nav {}
I would like to be able to align li.nav to the center without using text-align or margin as I have both float:left and float:right in use, so the float:right would be pushed out of line if they are used.
Hope you can help, thanks.
Use absolute positioning:
html, body {height:100%;margin:0;padding:0;font-size:12px;}
body {background:#F1F1F1;}
#navbar {
position:relative;
width:100%;
height:50px;
padding:5px 0;
overflow:auto;
background:#34495e;
border-bottom:solid 1px #222;
}
ul.nav {padding:0;list-style-type:none;}
li.nav_left, li.nav_right {padding:0 5px;}
li.nav_left {float:left;}
li.nav_right {float:right;}
li.nav {
background-color:green;
width:200px;
height:30px;
position:absolute;
margin:-15px 0 0 -100px;
top:50%;
left:50%;
text-align:center;
}
You need to rearrange your html code:
<body>
<div id="navbar">
<ul class="nav">
<li class="nav_left"><a class="nav" href="#">Home</a></li>
<li class="nav_left"><a class="nav" href="#">Support</a></li>
<li class="nav_right"><a class="nav" href="#">Login</a></li>
<li class="nav_right"><a class="nav" href="#">Register</a></li>
<li class="nav">
<form class="nav" method="post" action="action.php?do=search">
<input class="search_bar" type="text" name="search_input" />
</form>
</li>
</ul>
</div>
</body>
The above code is positioning the LEFT side of li.nav in the middle of #navbar. By using half of the width of li.nav as negative margin, the entire element is positioned in the exact center.
Just a quick example how it could work. You could also make container elements around nav_left and and nav_right and use position:absolute there as well. Inside the container element you can use float for the nav_left and nav_right elements.
http://jsfiddle.net/jCCL7/5/
In your CSS, it is a best to practice to use a "wrapper/container div".
Place all your div inside this wrapper div
.wrapper {
width: 500px;
margin: 0 auto;
}
So your HTML structure should look (not necessary exact) like this.
<body>
<div class="wrapper">
<div class="header">
<div class="content">
<p>"HelloWorld"</p>
</div>
</div>
</div>
</body>
The code above will display all your HTML content on the center of your page.
I have this layout:
I am trying to make the div with a slideshow, this above the red thing, be above the section of header.
I tried z-index, and a lot of other ways, but cannot get the layout to work.
This is my code:`
<div id="box">
<div class="clear"></div>
<div id="slideshow">
<ul>
<li>
<img src="imagens/1.png" alt="Curso 1" class="banner" />
</li>
<li>
<img src="imagens/2.png" alt="Curso 2" class="banner" />
</li>
<li>
<img src="imagens/3.png" alt="Curso 3" class="banner" />
</li>
<li>
<img src="imagens/4.png" alt="Curso 4" class="banner" />
</li>
</ul>
</div>
<div class="clear"></div>
<div id="header">
<div id="logo">
<img src="imagens/logo.png" id="" />
</div><!--logo-->
<div id="menu">
<ul>
<a class=""><li>HOME</li></a>
<a class=""><li>PROGRAMAÇÃO</li></a>
<a class=""><li>PALESTRANTES</li></a>
</ul>
</div>
</div><!--header-->
</div>
And this CSS:
.clear {
clear: both;
}
#box {
width:980px;
margin: 0 auto;
background-color:red;
}
#header {
z-index: 3;
}
#slideshow {
height:286px;
width:980px;
z-index: 0;
float: right;
}
#slideshow ul {
list-style: none;
}
#slideshow img {
overflow: hidden;
height:286px;
width:980px;
}
What can I do to solve this?
I'm trying to do something like this:
I think by "merge" you mean overlap.
To make the logo and navigation (#header) overlap the slideshow (#slideshow) above it, you will need to put a negative top margin on #header. You also need to add position to an element in order for z-index to work.
#header {
position:relative;
z-index: 3;
margin-top:-200px;
}
Once you do this, you may need to increase the z-index property of #header in order for it to get to overlap your slideshow.