There is an extra left margin in this nav bar that I am unable to change fiddle is here
HTML
<body>
<div class="wrapper">
<div class="container">
<nav class="nav">
<ul>
<a class="navlic" href="index.html"><li>Home</li></a>
<a class="navli" href="portfolio.html"><li>Portfolio</li></a>
<a class="navli" href="blog.html"><li>Blog</li></a>
<a class="navli" href="about.html"><li>About</li></a>
</ul>
</nav>
</div>
<div class="content">
<span><h1></h1></span>
</div>
<footer>
<p></p>
</footer>
</div>
</body>
CSS is in the fiddle
The nav object has a fixed position...use left:0 instead
JS Fiddle Example
It's padding not margin
.nav ul {
padding-left: 0;
}
add this at the start of css. not sure u remove default padding & margin yet but this works fine in fiddle
*{
padding:0;
margin:0;
}
Try to add this code:
.nav ul li,a{
float:left;
}
Hope it'll work. for make it more beautiful add margin-right to make a space between your menu. Just like this
.nav ul li,a{
float:left;
margin-right:10px;
}
DEMO
Related
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
Okay I do not know wether I have started completely wrong or just do not know how to get it right.
I want the layout of my website to be like this:
I put a div called 'myWrap' around the header and the content. And added this css:
.myWrap {
position: absolute;
padding: 0px;
margin: 0px;
background: white;
top: 2%;
left: 2%;
right: 2%;
}
.footer {
position: absolute;
background: #363130;
margin-top: 2%;
height: 300px;
left: 0;
width: 100vw;
}
And the footer is not in the myWrap-div. But now it is just floating behind the content because the position of the myWrap is absolute.
How do I put the header and content in the normal flow but infront of the background?
I structured the html like that:
<div class="row container-fluid myWrap">
CONTENT
<div class="container-fluid footer">
FOOTER
</div>
</div>
If I put the footer out of the myWrap div it starts floating around on the top or just overlaps the content/header
Change .myWrap to position: relative, your footer is getting the position absolute of the body, because It dosn't have a parent element with a relative position CSS atribute.
.myWrap {
position: relative;
}
With this, you will get your footer always on the bottom of myWrap. Then you can play with, the top/bottom properties and place it where you want ;)
I have created a Bootply to show it how it's working: http://www.bootply.com/8Wmx3CJHFv
Try this
<div class="myWrap">
<div class="container">
<div class="row">
Then add your footer after the end of the container
Personally, I would not work with your own wrapper. Bootstrap made them with a reason and that reason is they will work perfectly for responsive viewports.
I'd suggest you enhance something like this:
HTML
<html>
<body>
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
// content here
</div>
</div>
</div>
</header>
<section id="content">
<div class="container">
<div class="row">
<div class="col-lg-12">
// content here
</div>
</div>
</div>
</section>
<footer>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
// content here
</div>
</div>
</div>
</footer>
</body>
</html>
CSS
body {background-color: #FFF;}
footer {background-color: #FFF;}
header {background-color: #FFF;}
.container-fluid {padding: 0 0;}
Just make sure you remove the padding for the .container-fluid. And a tip: if you ever feel like creating your own wrapper, don't position them with absolute, but with relative. Otherwise it won't work well on all viewports.
You mentioned that you are using bootstrap, in bootstrap the container class wraps your data into a wrapper that has a fixed width on each screen-device-width so you will need to add a container div for the header and the content without adding it inside the footer div.
If you are using bootstrap framework you will need to use these following classes for these div's as the following code:
<div class="site-container">
<div class="header">
<div class="container">
</div>
</div>
<div class="content">
<div class="container">
</div>
</div>
<div class="footer">
</div>
</div>
<style>
body{
background:url(../image.jpg);
}
header {
max-width:600px;
width:100%;
display:block;
background:#ccc;
height:250px; //header height no need to mention in your work
border:1px solid #000;
margin:auto;
}
#content {
max-width:600px;
width:100%;
display:block;
background:#ddd;
height:500px; //content height no need to mention in your work
border:1px solid #000;
margin:auto;
}
footer {
width:100%;
height: 300px;
left: 0;
background:#000;
}
</style>
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
// Header
</div>
</div>
</div>
</header>
<section id="content">
<div class="container">
<div class="row">
<div class="col-lg-12">
// Content
</div>
</div>
</div>
</section>
<footer>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
// content here
</div>
</div>
</div>
</footer>
Demo: https://jsfiddle.net/q4Lcjmsy/3/
I'm a total noob at this... I did the whole code academy classes, can't seem to find an answer to my problem anywhere. Basically my site is centralised, from top to bottom it goes;
Logo
Navigation Bar
{Huge random space)
Picture
Copyright note
It's this space I'm trying to get rid of so that the space I have between my logo and the nav bar matches the space between the nav bar and the picture...
Here is my HTML;
<!DOCTYPE html>
<html>
<head>
<title>Access All Areas - Fashion</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div style="min-width: 960px; min-height: 760px; margin: 0 auto;">
<!-- AAA Logo -->
<div class="image">
<center>
<img src="a1.jpg" alt="Access All Areas Logo" width="750px"
height="320px">
</center>
</div>
<!--Navigation Bar-->
<div class="nav">
<center>
<ul>
<li class="main">HOME</li>
<li class="live">LIVE</li>
<li class="studio">STUDIO</li>
<strong><li class="fashion">FASHION</li>
</strong>
<li class="weddings">WEDDINGS</li>
<li class="portraits">PORTRAITS</li>
<li class="about">ABOUT
CONTACT</li>
</ul>
</center>
</div><!--Nav-->
</div><!--Style-->
<!--COVER IMAGE-->
<center>
<div class="cover">
<img src="images/fashion.jpg" alt="Access All Areas Fashion Image"
width="1400px" height="2300px">
</center>
</div><!--Cover-->
<!--Copyright-->
<center>
<div id="copyright">
<p><strong>ALL RIGHTS RESERVED ACCESS ALL AREAS PHOTOGRAPHY</p></strong>
</div><!--Copyright-->
</center>
</body>
</html>
and my CSS;
li {
display:inline;
}
.nav a {
font-family:arial;
font-size:18px;
color: black;
padding:0px 75px 0px 25px;
}
a {
text-decoration:none;
}
.cover {
margin-top:0px;
}
.main {
text-weight:strong;
}
p {
font-family:arial;
font-size:18px;
font-weight:bold;
}
I really hope someone can help me. Another couple of things I'm looking to do is to relocate the copyright text to the bottom left of the image and also make a grid of different sized images and have no idea where to start.
Many thanks
Peter James
Would have been great and easy to solve your problem, if you had provided us with a jsfiddle. But anyway, I think min-height is causing the problem. As you have forcing the header to be 670px tall. See here http://jsfiddle.net/0v4fsg6z/ I have reduced the height to remove the space before Picture Copyright note.
Did you try and set your img tag to position: absolute?
I have a problem to align horizontaly DIV and UL, check the fiddle : HERE
You can see DIV and UL are not on the same line.
<div class="col-md-12">
<div class="box-header">
<h4 class="box-title">Title</h4>
</div>
<ul id="menuOnglet" class="nav nav-pills">
<li class="active">Elem1</li>
<li>Elem2</li>
<li>Elem3</li>
</ul>
</div>
#menuOnglet{width:300px; margin-left:auto; margin-right:0;}
I don't want to wrap my UL with another DIV. Thanks !
You can do that with a simple CSS declaration:
div, ul, li {
display: inline-block; /* this will align all div, ul, li elements on the webpage horizontally */
}
#menuOnglet{width:300px; margin-left:auto; margin-right:0;}
div, ul, li {
display: inline-block;
}
<div class="col-md-12">
<div class="box-header">
<h4 class="box-title">Fiche contact : Jean paul</h4>
</div>
<ul id="menuOnglet" class="nav nav-pills">
<li class="active">Elem1</li>
<li>Elem2</li>
<li>Elem3</li>
</ul>
</div>
Updated jsFiddle
Try this:
#menuOnglet{width:100px; margin: 0 auto;}
.box-header{text-align:center;}
This is my code which is working fine but when i change my headline2text to "Sale Price $25 . This is a sample text. $244" then auto logo image changes its position. I do not want logo to change its position but it should remain on its place and should not be affected by the headline2Txt. How to fix this issue?
<div id="wrapper">
<div id="mainContainer">
<p class="copyrights" id="copyrights"></p>
<div>
<img id="Image_Car" src="http://i.share.pho.to/25a090ef_c.png" />
</div>
<div id="headlineText">
<p id="headline1Txt" >Sample bag1</p>
<p id="headline2Txt" >Sale Price $25 </p>
</div>
<div id="disclaimer" >
Details*
</div>
<div id="Image_logo">
<img id="Imglogo" src="http://i.share.pho.to/93578bd4_o.png" />
</div>
<div >
<button class="btn btn-primary" type="button" id="ctaBtn"><div id="fadeIn" > Learn More Now </div></button>
</div>
</div>
#Image_logo img
{
position:relative;
width:140px;
height:30px;
top:-3px;
left:390px;
}
</div>
I may not understand what you're asking, but I think the lack of a float is throwing you. Adding some css like this..
<style>
#Image_logo img {
width:140px;
height:30px;
}
#wrapper {
float:left;
}
</style>
...should work. It should be in a separate .css file of course.
You have position: relative; on #Image_logo img yet you try to position it the "absolute way". Try to change your CSS like this:
#Image_logo img {
position:absolute;
width:140px;
height:30px;
top:40px;
left:390px;
}
Try giving your #Image_logo img position: absolute instead of relative, then modify top, left etc. Then it should be always in the same place;