I am trying to float my four links so that it is lineal and one next to the other. I am fairly new to CSS, so please bear with me. I have endlessly tried different positions properties and yet can not achieve what I want. Thanks
<!DOCTYPE html>
<html>
<head>
<style>
body{
margin: 1px;
background:green;
}
. topbar
{
background:url(topbar.gif);
position:absolute;
top: 5px;
right: 15px;
margin: 2px;
width: 1200px;
height: 100px;
}
.navbar
{
position:absolute;
float:right;
width:1200px;
height:100px;
border-style:groove;
}
a:link {text-decoration:none;color:yellow;}
a:hover{color:red;}
#titlename
{
position:relative;top:10px;
text-align:center;
}
</style>
</head>
<body>
<div class="topbar">
</div>
<div id="titlename">
</div>
<img src="title.gif" alt="title">
</div>
<div class="navbar">
<div class="button">HOME
<div class="button">ABOUT
<div class="button">LINKS
<div class="button">CONTACT
</div>
</body>
</html>
I don't know if you've noticed since posting your question, but each of your button DIVs is missing it's closing DIV tag. This means that any CSS applied will not have the expected effect. Once you've fixed the HTML, you can use the following CSS to have each navigation item on the same line, spaced out equally, with the menu occupying the full width:
.button {
float: left;
width: 25%;
}
If you don't want the menu to occupy the full width, use padding or margin instead of specifying 25% for the width attribute, e.g:
.button {
float: left;
padding: 0 20px;
}
There are various methods to inline the elements.
1. using Flex Method
2. using table method
3. using float method
4. using display method.
Here you can check the Demo link. includes all possibility.
You can use either use float: left; or display: inline to achieve what you want.
DEMO
Just add following style to your anchor tags:
.navbar a {
float:left;
margin-right: 15px;
}
Working Fiddle
.button{
display:inline-block;
}
Related
<html>
<head>
<title>My Play Store</title>
<style type="text/css">
body{
margin:0;
}
#container{
min-width:1080px;
}
#upperbar{
background-color:#F1F1F1;
height:60px;
width:100%;
}
#logobardiv{
margin:10px 20px 10px 30px;
float:LEFT;
}
#logo{
height:39px;
width:183px;
}
#searchbardiv{
float:left;
padding:15px 0px 15px 10px;
}
#searchbar{
height:28px;
width:545px;
font-size:1em;
}
</style>
</head>
<body>
<div class="container">
<div id="upperbar">
<div id="logobardiv">
<img id="logo" src="images/logo.png"/>
</div>
<div id="searchbardiv">
<input id="searchbar" type="text" placeholder="Search"/>
</div>
</div>
</div>
</body>
In the above page that I am trying to make,the "searchbardiv" tends to move below "logobardiv" when I reduce the size of the browser window.
I just want want the two divs to be in the same line.I tried using "float:left",but it is not giving the required result.
Instead of using floats, try using display: inline-block for the two child elements and white-space: nowrap to keep them both on the same line.
Apply display: inline-block to both #logobardiv and #searchbardiv and apply vertical-align: middle (or other value as needed) to #logobardiv to take care of any vertical alignment issues.
Finally, apply white-space: nowrap to the #upperbar to keep the two child elements on the same line.
Note that for smaller enough screens, you could get horizontal scrolling. To fix this, you need to make a design decision to handle the situation. You could make the search input width smaller or the logo smaller or both, perhaps by using % widths instead to make them responsive. You have a few options available to solve the problem.
body {
margin: 0;
}
#container {
min-width: 1080px;
}
#upperbar {
background-color: #F1F1F1;
height: 60px;
width: 100%;
white-space: nowrap;
}
#logobardiv {
margin: 10px 20px 10px 30px;
display: inline-block;
vertical-align: middle;
}
#logo {
height: 39px;
width: 183px;
}
#searchbardiv {
display: inline-block;
padding: 15px 0px 15px 10px;
}
#searchbar {
height: 28px;
width: 545px;
font-size: 1em;
}
<div class="container">
<div id="upperbar">
<div id="logobardiv">
<img id="logo" src="http://placehold.it/183/39" />
</div>
<div id="searchbardiv">
<input id="searchbar" type="text" placeholder="Search" />
</div>
</div>
</div>
You Give your search bar width 545px try to reduce this when on small screen use media query:
e.g
#media(max-width:768px) {
#searchbar{
width:200px;
}
Hope this helps
search bar size is too long enough so it is displayed in next line.Set the logo size and search bar width in %.
width:70%;
Fiddle
solution 1: use % instead of pixel for width if you want divs to be flexible e.g:
#searchbar{
height:28px;
width:80%;
font-size:1em;
}
solution 2: if you don't want the divs to be resized with screen, set them as table cell:
#upperbar{
/* your current styles here */
display:table;
}
#logobardiv{
/* your current styles here */
display:table-cell
}
#searchbardiv{
/* your current styles here */
display:table-cell
}
What is the easiest way to align a div to center widthout using position. i have 3 div and i want to set center of page with using CSS
<!doctype html>
<html lang="en">
<head>
<title></title>
</head>
<style>
#content {
width: 200px;
height: 200px;
margin:0 auto;
border: 1px solid #000;
float:right;
}
</style>
<body>
<div id="content">
content 1
</div>
<div id="content">
content 2
</div>
<div id="content">
content 3
</div>
</body>
</html>
You are using same ids multiple time. ids must be unique.
Use class instead.
Wrap all content divs in an element:
HTML:
<div class="container">
<div class="content">content 1</div>
<div class="content">content 2</div>
<div class="content">content 3</div>
</div>
CSS:
.container {
width:606px; /* (200*3) = 600 + (6px for borders) */
margin:0 auto;
}
.content {
width: 200px;
height: 200px;
border: 1px solid #000;
float:left;
}
DEMO here.
First of all, don't use ID like class, you can repeat ID so many times but it's a bad practice.
And I'm not sure if I understood it right, but remove float:right from your css which will get your div's one below another. You can see output fiddle
Here is the css with few line of code
.container{width:100%;}
.container div{border:1px solid red;margin:0 auto;width:200px;}
Give it a width and do margin: 0 auto;
Ow, and use an unique id.
first of all you are using "id" selector for 3 elements/containers which is wrong.
replace the style with below snippet
<style>
#content {
width: 200px;
height: 200px;
margin:0 auto;
border: 1px solid #000;
}
</style>
i just have removed the floating (which forcing your containers to be on right)
Wrap divs with a parent div and add margin:0 auto
.wrapper{
width:200px;
margin:0 auto;
border:solid 2px red
}
.content{
background:grey;
}
DEMO
You want to modify your code as less as possible?
Then you might want to delete your floating:
#content {
width: 200px;
height: 200px;
margin:0 auto;
border: 1px solid #000;
/*float:right;*/
}
Because you are using a margin to center the element, a float is not neccesary. A float will only put the element out of the flow(so basically the <body> doesn't see these elements as his content, which results that the elements cannot center them selves from their parent. There is no parent of the same flow!)
jsFiddle
It is also a good call to not use the same IDs. IDs should always be unique
However same IDs are supported by CSS, but it is a good practice to use unique IDs from now on.
You can use the margin: 0 auto; on the element which has to be placed in the center. However in order to do this the element must have some sort of a wrapper(not "body") to be able to use the auto setting.
<html>
<head>
</head>
<body>
<div id="page_wrapper">
<div id="div_1" class="centered_div">foo</div>
<div id="div_2" class="centered_div">foo</div>
<div id="div_3" class="centered_div">foo</div>
</div>
</body>
</html>
CSS:
#page_wrapper{
width:100%;
}
.centered_div{
margin: 0 auto;
}
This centers all elements which have the class centered_div to the middle of their parent.
Other option is to used fixed canter position. For example if you're creating a popup notification message, this might be a way to go.
.notification_window{
position: fixed;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
But if it's just a regular page element like a div with some content use the first example.
If you need any further explanations please comment.
I'm having a problem with placing the 'navigation' div (within 5 buttons) to the right side of the page in the '#header' div. The 'navigation' div is still next to the 'logo' div.
Can someone help me to get it to the right side of the page?
CSS code:
body {
background-color: #000000;
margin:0;
padding:0;
}
#header {
width: 100%;
height: 100px;
background-color: 222423;
margin-bottom: 5px
}
#logo {
float: left;
}
#navigation {
display: inline-block;
vertical-align: middle;
}
#content {
height: auto;
}
.knop {
margin-right: 7px;
margin-left: 20px;
vertical-align: middle
}
.plaatje {
position: fixed;
width: 628px;
height: 300px;
margin: -150px auto auto -319px;
top: 50%;
left: 50%;
text-align: center;
}
.DivHelper {
display: inline-block;
vertical-align: middle;
height:100%;
}
HTML code:
<html>
<head>
<link typte="text/css" rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="header">
<div id="logo">
<img src="images/logo.png" width="90px">
</div>
<div id="navigation">
<img class="knop" src="images/buttonhome.png">
<img class="knop" src="images/buttonoverons.png">
<img class="knop" src="images/buttonproduct.png">
<img class="knop" src="images/buttonmedia.png">
<img class="knop" src="images/buttoncontact.png">
</div>
<div class="DivHelper"></div>
</div>
<img class="plaatje" src="images/headimage.png" >
fkfddkfd
</div>
<div id="footer">
</div>
</body>
</html>
There are multiple approaches to this, and you might have to experiment what works for you.
First of all, there's the position property, if you wanted to place the navigation to the right you'd get:
#navigation
{
position: absolute; /*or fixed*/
right: 0px;
}
This approach is very situational and might break. In some cases even breaking the entire lay-out. Best practices dictate to use this one as little as possible, but sometimes there's no other choice.
The other way, which may or may not work, again, is to use the float property
#navigation
{
float: right;
}
Do like this (use float & dont forget the clear in content div) :
#navigation {
display: inline-block;
vertical-align: middle;
float: right;
}
#content {
clear:both;
height: auto;
}
#navigation {
display: inline-block;
vertical-align: middle;
float: right;
padding-right: 50px;
padding-top: 50px;
}
adjust padding right and top px if u want....
You need to use float in navigation div and some width.
#navigation {
display: inline-block;
vertical-align: middle;
float:right;
}
Update this class and check it should work
Youri,
There are a few ways to accomplish this effect, here is one.
Take a look at this:http://jsfiddle.net/legendarylion/8jKUP/1/
THE HTML
<body>
<div id="header">
<div id="logo">
<!--You may wish to eliminate the "width" property here and use the css to style the image... also, I'm assuming you're going to want to wrap this image in an anchor tag that points back to index.html (or default.html, whatever your homepage is...-->
<img class="example-logo" src="images/logo.png" width="90px">
</div>
<!--Your image code in your original source did not have anchor tags. If you want those to function as a nav, you might as well mark it up like I have it below, wrapping the image inside of a 'nav' element, ul, li, and anchor tag. Also see the CSS comments for ideas on sprite images and sticky menus-->
<nav>
<ul>
<li><!--add your image code back here-->Home
</li>
<li><!--add your image code back here-->Overons
</li>
<li><!--add your image code back here-->Product
</li>
<li><!--add your image code back here-->Media
</li>
<li><!--add your image code back here-->Contact
</li>
</ul>
</nav>
</div>
<div class="DivHelper"></div>
</div>
<div id="footer"></div>
</body>
</html>
THE CSS
/* Make the header relative so we that the 'asbolute' positioning uses it as a reference, also, let's give that header an outline so we can see what we're doing */
#header {
position:relative;
border:1px dashed green;
}
/* Make the nav position asboslute to place it to the right */
nav {
position:absolute;
top:0px;
right:0px;
border:1px dashed blue;
}
/*So what happened? The parent element "header" is referenced by "nav" and "nav" is positioned absolutely relative to that parent in the top right hand corner. Nav will stay there even if the parent container has more elements added to it.
Also, it's worth asking I think... Did you want the menu static, or fixed as the page scrolls? That might be worth looking into as well. Look to the trusty W3C to help you out there: http://www.w3.org/Style/Examples/007/menus.en.html*/
/* Style the Nav (You can add your images right back into the html if you prefer, though you may want to look up how to make a sprite image with the css background property and positioning so they load as one file call, but hey, first thing is first right? */
nav ul li {
list-style-type:none;
display:inline-block;
margin:0 10px;
}
nav ul li a {
text-decoration:none;
}
.example-logo {
height:50px;
width:50px;
background:blue;
}
What we're doing here is declaring a parent element relative, and the element you want styled in the top right corner absolute to that relation.
Also take a look in my comments in that code for some other ideas that I think might be helpful to you.
I used margin-left property like this:
#navigation {
display: inline-block;
vertical-align: middle;
margin-left: 70%;
}
The margin-left will create space out side of element. You can get the left side of element with enough space, then your element will be the right side of the page.
Reference:
https://www.w3schools.com/css/css_margin.asp
I have a code like
<div id="container" >
<div id="content"></div>
<table id="link" cellspacing=0px; cellpadding=0px;>
</table>
</div>
with css
#contentDiv {
width: 100%;
height:100%;
margin: 0;
}
#content {
width:90%;
height:60%;
margin-left:20px;
display: inline;
vertical-align: left;
z-index:40;
}
#link {
width:30%;
height:50%;
margin: 0;
margin-top:10px;
margin-right:10px;
float: right;
z-index:70;
}
i want it to display like
without absolute div floating over table
but its not displaying like that any help is appreciated?
Use a floating div but make the left-margin of the div a negative number so it 'floats' over the table
For example:
CSS:
#container {
width: 100px;
height: 100px;
float: left;
background-color: red;
}
#content {
width: 60px;
margin-right: -30px;
height: 60px;
float: right;
background-color: green;
}
HTML:
<div id="container">
<div id="content"></div>
</div>
works fine.
First: You have a container element, but no CSS statements tied to it. And you have a contentDiv CSS statement, but no corresponding HTML element.
Second: As davblayn mentioned, you can use a negative margin-left value.
#link {
...
margin-right:-40px;
...
}
See an example here (JSFiddle).
If you change the display property of each table element to block, it will force the table back into block mode and then everything works fine.
<div style="float:right;background:red;width:200px;">This is a test.</div>
<table style="display:block;background:green;">
<tr style="display:block;">
<td style="display:block;">
This is a very long string. This string should break to the next line instead of spanning across like usual.
</td>
The problem is that the border of div#content also appears in div#navigation?
<html>
<head>
<title>WUI</title>
<style type="text/css">
div#header {
}
div#navigation {
float: left;
padding-right: 20pt;
}
div#content {
border: 5px groove;
}
</style>
</head>
<body>
<div id="header">
<h1>WUI</h1>
</div>
<br />
<div id="navigation">
<ul>
<li>Home</li>
<li>Login</li>
</ul>
</div>
<div id="content">
<p>I like when you ride with that booty on me!</p>
</div>
</body>
</html>
EDIT: I want the left side (navigation) to appear as a sidebar to the left and the content after that (to the right). I'm applying the border to the content but that border also appears in div of navigation. I hope it is clear now.
You need an overflow: auto; for your div#content. It's magical, hence no explanation will be given:
div#content {
border: 5px groove;
overflow: auto;
}
Well, after your edit, I can see your border isn't the problem. I usually do this:
html
{
background-color: white;
}
body
{
padding-left: 200px;
background-color: green;
}
#navigation
{
position: fixed;
width: 200px;
left: 0px;
top: 0px;
}
It makes you navigation static, and the content just magically works. The downside is that you have to use pixel-based layouts, which I don't really like doing. It's your choice.
Here's a semi-relevant thing I made a while back. See if it works for you: http://jsfiddle.net/dDZvR/12/
navigation is floating, which means it's taken out of the document flow, and the next element (content) moves up to take it's place.
However, navigation still has to float somewhere, so it's taking up space inside content.
To avoid this, either float content as well, or put a left margin on it equivalent to the width of navigation.
edit: after seeing your edit, I'd say the left margin idea would definitely be the better one.
you need to give float to the content because you give float to the navigation.
use this example:
<style type="text/css">
div#header {
}
div#navigation {
float: left;
padding-right: 20pt;
}
div#content {
float: left;
border: 5px groove;
}
</style>
It's because of how floats work. You're going to have to put a margin on #content or something like that.
It can be corrected by adding a left margin to the div#content. The corrected code is here - http://jsfiddle.net/sparky/vctcN/
you can add a
float: left;
in content and set the width yourself
This one may works:
WUI
<style type="text/css">
div#header {
display:block;
}
div#navigation {
width:150px;
float:left;
}
div#content {
border: 5px groove;
margin-left:160px;
}
</style>
</head>
<body>
<div id="header">
<h1>WUI</h1>
</div>
<div id="navigation">
<ul>
<li>Home</li>
<li>Login</li>
</ul>
</div>
<div id="content">
<p>I like when you ride with that booty on me!</p>
</div>
</body>