I'm working on a navigation bar and it currently looks like this:
Now I want that the text floats to the right. So that the red space is on the left-side. But if try "float: right", it looks like this:
The red background disappeared. I used a extra div (columnsection) but in the best case scenario I want to get rid of it. I hope someone could help me.
* {
padding: 0px;
margin: 0px;
}
#navbar {
margin: auto;
width: 100%;
max-width: 1200px;
background-color: red;
color: white;
}
#navbar ul li {
display: inline-block;
background-color: blue;
margin: 0px;
}
#navbar ul {
float: right;
}
<div id="navbar">
<div id="columnsection">
<ul>
<li> Lorem </li>
<li> Lorem </li>
<li> Lorem </li>
<li> Lorem </li>
<li> Lorem </li>
</ul>
</div>
Instead of float:right use text-align:right
* {
padding: 0px;
margin: 0px;
}
#navbar {
margin: auto;
width: 100%;
max-width: 1200px;
background-color: red;
color: white;
}
#navbar ul li {
display: inline-block;
background-color: blue;
margin: 0px;
}
#navbar ul {
text-align: right;
}
<div id="navbar">
<div id="columnsection">
<ul>
<li> Lorem </li>
<li> Lorem </li>
<li> Lorem </li>
<li> Lorem </li>
<li> Lorem </li>
</ul>
</div>
</div>
Related
I've been trying to get this scrollbar code to work on Blogger, but haven't been able to figure out how to. Can someone see if they are able to figure out what the issue is, and how to resolve it.
Same Code, Both look and act different,
Jsfiddle:
https://jsfiddle.net/xuc92tt3/
Screenshot
vs.
Blogger:
https://debugscroll.blogspot.com/
Screenshot
Also, there shouldn't be a horizontal line below the div blocks either.
<style>
.test {
width: 266px;
height: 175px;
padding: 0;
margin: 0;
overflow: auto;
background: #000;
list-style: none;
text-align: left;
}
.test li {
padding-bottom: 20px;
}
.test li:last-of-type {
padding: 0;
}
h2 {
margin: 0;
line-height: 1;
font-size: 25px;
color: #00f;
}
.test a:link {
width: 243px;
height: 20px;
display: block;
background: green;
}
.test a:visited {
background: #f00;
color: #000000;
}
.test a:hover {
color: #000;
}
</style>
<ul class="test ">
<li>
<h2>Text</h2>
</li>
<li>
<h2>Text</h2>
</li>
<li>
<h2>Text</h2>
</li>
<li>
<h2>Text</h2>
</li>
<li>
<h2>Text</h2>
</li>
<li>
<h2>Text</h2>
</li>
<li>
<h2>Text</h2>
</li>
<li>
<h2>Text</h2>
</li>
<li>
<h2>Text</h2>
</li>
<li>
<h2>Text</h2>
</li>
<li>
<h2>Text</h2>
</li>
<li>
<h2>Text</h2>
</li>
<li>
<h2>Text</h2>
</li>
<li>
<h2>Text</h2>
</li>
</ul>
Looks like in the blogspot example your <li> elements are inheriting a 15px padding from a global style declared in the page head section.
Try overriding that with the following css:
.test li {
padding-bottom: 20px;
padding-left: 0;
padding-right: 0;
}
Add this CSS code
.main-inner .widget ul li {
padding: 0;
border-top: 0;
border-bottom: 0;
margin-bottom: 20px;
}
.main-inner .widget h2 {
margin: 0;
padding: 0;
}
I would like to place an image to the left of the text and keep it like that depending on the resolution of the window.
Here's what it looks like without an image: http://prntscr.com/fmky4f
This is what I would like it to look like after placing it. https://prnt.sc/fmkk0a
This is my code:
.xd {
font-size: 20px;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.xd li {
display: inline;
}
.xd a {
display: inline-block;
padding: 5px;
color: #080808;
}
.logo {
width: 10%;
height: auto;
float: left;
}
<div class="container">
<div id="container-fluid">
<ul class="xd">
<li>
Home
</li>
<li>
About Us
</li>
<li>
News
</li>
<li>
Gallery
</li>
<li>
Map
</li>
<li>
Contact Us
</li>
</ul>
</div>
Now I tried just simply putting in the image with the .logo class properties, but they don't seem to do the job as intended.
If you're going to use floats and widths for the logo, use that for the menu also.
.xd {
float: left;
width: 90%;
font-size: 20px;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.xd li {
display: inline;
}
.xd a {
display: inline-block;
padding: 5px;
color: #080808;
}
.logo {
width: 10%;
height: auto;
float: left;
}
<div class="container">
<div id="container-fluid">
<img class="logo" src="http://placehold.it/50x50">
<ul class="xd">
<li>
Home
</li>
<li>
About Us
</li>
<li>
News
</li>
<li>
Gallery
</li>
<li>
Map
</li>
<li>
Contact Us
</li>
</ul>
</div>
You could also use flexbox. Perhaps something like this:
header,
ul {
display: flex;
}
header img {
display: block;
max-width: 100%;
height: auto;
}
header ul {
flex-grow: 1;
justify-content: center;
margin: 0;
padding: 0;
list-style: none;
font-size: 20px;
}
header a {
padding: 5px;
color: #080808;
}
<header>
<div>
<img src="http://placehold.it/50x50">
</div>
<ul>
<li>
Home
</li>
<li>
About Us
</li>
<li>
News
</li>
<li>
Gallery
</li>
<li>
Map
</li>
<li>
Contact Us
</li>
</ul>
</header>
You can use position: absolute; and the default settings on the image as shown below. (You can use top and left settings to move it away from the border/corner if you want)
This keeps the menu items centered in relation to the container.
.xd {
font-size: 20px;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.xd li {
display: inline;
}
.xd a {
display: inline-block;
padding: 5px;
color: #080808;
}
.logo {
width: 10%;
height: auto;
float: left;
}
#image1 {
position: absolute;
}
<div class="container">
<img src="http://placehold.it/80x50/fb4" id="image1">
<div id="container-fluid">
<ul class="xd">
<li>
Home
</li>
<li>
About Us
</li>
<li>
News
</li>
<li>
Gallery
</li>
<li>
Map
</li>
<li>
Contact Us
</li>
</ul>
</div>
I'm having some issues with one of my div. The page is set to full screen top to bottom left to right and everything is fine until I start adding some content into the div "top_nav" which seems to push the entire "header_wrapper" downward. My CSS will tell you everything thats going on as well.
<div id="wrapper">
<!-- header Section -->
<div id="header_wrapper">
<div id="header_content">
<div id="top_nav">
<ul>
<li class="cg">Login/Register</li>
<li class="cg">Shopping</li>
<li>
<form action="http://www.example.com/login/">
<input name="search" placeholder="Enter keyword" type="search"><input type="submit" value="Search">
</form>
</li>
</ul>
</div>
<div id="logo"></div>
<div id="bottom_nav">
<ul>
<li class="cg">
News
</li>
<li class="cg">
Videos
</li>
<li class="cg">
Photography
</li>
<li class="cg">
Our Magazine
</li>
<li class="cg">
Environment
</li>
<li class="cg">
Travel
</li>
<li class="cg">
Kids
</li>
<li class="cg">
Television
</li>
</ul>
</div>
</div>
</div>
</div>
#html,body {
margin: 0;
padding: 0;
}
#wrapper {
margin: 0 auto;
padding: 0;
background-color: #DDDAD4;
}
#header_wrapper {
width: 100%;
height: 110px;
background-color: #383838;
overflow: hidden;
}
#header_content {
width: 1000px;
height: 110px;
background-color: #ffc0cb;
margin: auto;
}
#top_nav {
width: 1000px;
height: 30px;
background-color: green;
}
#top_nav li {
display: inline;
color: #fff;
}
#logo {
width: 80px;
height: 80px;
background-color: #000;
float: left;
}
#bottom_nav {
width: 920px;
height: 80px;
background-color: red;
float: right;
}
#bottom_nav li {
display: inline;
}
#bottom_nav a {
color: #fff;
}
Looks like it's because of the margin in your <ul>. Here's a JSFiddle where I removed the margins: https://jsfiddle.net/jameson5555/wrzLcz3L/
ul {
margin: 0;
}
I floated a logo image and the title of the page to the left, but then the nav gets in the way along with some of the main content. I tried to clear the nav but then when I want to display my navs inline it will throw it off. So I can't do that.
Anyone know what to do?
* {
margin: 0px;
padding: 0px;
}
header,nav,section,article,aside,footer {
display: block;
}
.container {
width: 960px;
margin: 0 auto;
}
.main_header img {
float: left;
}
.main_header h1 {
float: left;
}
<header class="main_header">
<img src="logo2.jpg" alt="logo pic">
<h1>Title of header</h1>
</header>
<nav>
<ul>
<li>Home
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</nav>
Add this to your css:
header{clear:both; overflow:hidden;}
nav ul li {display:inline;}
* {
margin: 0px;
padding: 0px;
}
header,nav,section,article,aside,footer {
display: block;
}
.container {
width: 960px;
margin: 0 auto;
}
.main_header img {
float: left;
}
.main_header h1 {
float: left;
}
header{clear:both; overflow:hidden;}
nav ul li {display:inline;}
<header class="main_header">
<img src="logo2.jpg" alt="logo pic">
<h1>Title of header</h1>
</header>
<nav>
<ul>
<li>Home
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</nav>
I've been trying to create a navigation bar which consists of three pieces, a list to the left of the centered logo, the logo itself and a list to the right of the logo. I've tried absolutely positioning the logo and floating the lists however this leads to the logo overlaying the lists when the width of the browser is altered.
Any suggestions would be much appreciated, JSFiddle included below :-).
JSFiddle
HTML
<div class="navigation">
<div class="container-1020">
<ul>
<li>Home</li>
<li>Work</li>
<li>Contact</li>
<li>Blog</li>
</ul>
<div class="nav-logo">
<img src="http://placehold.it/200x60"/>
</div>
<ul>
<li>01234 123456</li>
</ul>
</div>
</div>
CSS
.navigation {
background: #222222;
}
.container-1020 {
max-width: 1020px;
min-width: 500px;
margin: 0 auto;
}
ul {
color: #fff;
margin: 0;
list-style-type: none;
}
li {
display: inline;
margin-right: 10px;
}
li:last-child {
margin-right: 0 !important;
}
.logo-container {
width: 200px;
height: 60px;
}
This might work for youFIDDLE
css:
* {
margin: 0;
}
a {
color: #ffffff;
text-decoration: none;
}
.navigation {
background: #222222;
}
.container-1020 {
max-width: 1020px;
min-width: 500px;
margin: 0 auto;
}
ul {
color: #fff;
list-style-type: none;
display: inline-block;
width: 30%;
}
ul:last-child {
text-align: right;
}
.nav-logo {
display: inline-block;
width: 30%;
}
html:
<div class="navigation">
<div class="container-1020">
<ul class="left">
<li>Home
</li>
<li>Work
</li>
<li>Contact
</li>
<li>Blog
</li>
</ul>
<div class="nav-logo">
<img src="http://placehold.it/200x60" />
</div>
<ul class="right">
<li>01234 123456</li>
</ul>
</div>
</div>
well for one, correct your class name for the logo, is it .nav-logo or .logo-container
then set your ul's and whichever logo container class you decide on to display:inline-block