The links are going out of the navigation bar, because it is too tall (I think), and I want the items to go aside from eachother.
#navbar {
height: 21px;
width: 100%;
top: 200px;
text-align: center;
font-size: 20px;
}
Oh and here's the HTML:
<div id="navbar">
{block:AskEnabled}
<div class="navitem">{AskLabel}</div class>
{/block:AskEnabled}
{block:SubmissionsEnabled}
<div class="navitem">{SubmitLabel}</div class>
{/block:SubmissionsEnabled}
<div class="navitem">{text:Link 1}</div class><div class="navitem">{text:Link 2}</div class><div class="navitem">{text:Link 3}</div class>
</div id="navbar">
Ignore the stuff in brackets like AskLabel, and the div class navitem, I got rid of it :P
Because your links are in divs, which are block elements, there is a page break between each div. You need to use something like a span or set display: inline on your navitem div elements.
See example: http://jsfiddle.net/7dPkQ/3/
Edit for clarification: spans by default have display: inline set. divs by default have display: block set. In your example, the links will go side by side if they are wrapped in an inline element. See also http://www.w3schools.com/cssref/pr_class_display.asp
Related
Just curious:
I have a very simple webpage. I am toying with css files to make it look different.
Especially various divs:
<div align="center">
Apparently, this align="center" cannot, should not, be put in the css file.
I can set the width, background, text style etc.
Why is align not allowed in css?
Because align= is an HTML attribute (an old one) and doesn't have anything to do with CSS.
CSS properties for centering things are different based on the display property of the element being centered.
display: block elements are centered using a left and right margin set to auto. Note that a width must be supplied or it won’t work.
display: inline-block elements are centered by having the element’s parent set to text-align: center (which will center all inline and inline-block children).
/* block level element */
.aaa {
width: 50px;
height: 50px;
margin: 0 auto; /* this centers with width */
background: red;
}
<div class="aaa"></div>
and
/* inline-block or inline elements */
.parent {
text-align: center;
}
<div class="parent">
<h3>I’m a title that’s centered</h3>
</div>
There is also flexbox, but given the nature of your question it’s probably too confusing for you right now.
In CSS, you can align something by placing it inside a div. Then you have to use "text-align" in CSS. Here's an example
<html>
<div id="center">
<p>I'm in the center</p>
</div>
<style>
#center{
text-align:center;
}
</style>
</html>
That's all you have to do! (hope this helped)
I would like to create a simple HTML page that looks as follows:
Here is how I wrote my HTML code for the green band, I will not discuss the content of the body (the left, middle, right part) here:
h1 {
color: white;
font-size: 30px;
}
.band-header {
text-align: left;
background-color: #1abc9c;
}
<div class="band-header">
<header class="site-header">
<h1>Sample Web Application</h1>
<img src="image.png" align="right">
</header>
</div>
Here are my questions:
1. I know that there are many mistakes in my code, the first thing that I didn't get is the green-coloured header background never appeared. Even if I changed the CSS to .site-header, it still didn't appear.
2. How could I make the text **"Sample Web Application"** to the bottom left of the green band? It always appeared on the top left. Is there a bottom-left alignment?
3. How could I make the image on the top right of the green band? I tried align right but it is never positioned to the top left. Is there a way to position it on the right and on the top?
I know it's a lot of questions and I am just a newbie at HTML and CSS. Could anyone please give some lights? I really appreciate it. Many thanks.
The green color appears in your code, but the header does not have a specified height. It is therefore as high as its highest child element. Below I made the header 100px high which allows for bottom and top alignment of the child elements.
2 + 3: The container (header) is defined as a flexbox. This allows for alignment options of its child elements (items).
.band-header>header {
height: 100px;
background-color: #1abc9c;
display: flex;
justify-content: space-between;
}
.band-header>header h1 {
color: white;
font-size: 30px;
margin: 0;
align-self: flex-end; /* put it at the bottom */
}
.band-header>header img {
align-self: flex-start; /* put it at the top */
}
<div class="band-header">
<header class="site-header">
<h1>Sample Web Application</h1>
<img src="https://via.placeholder.com/50x50">
</header>
</div>
http://optimalpages.de/DrupalMusi/
How can I position the main content div in the middle without it collapsing to the left, when left sidebar is shorter than the content? Is that possible? I don't want to use a fixed height for the navigation, but can I somehow say "sidebarleft height = content height", or is there an easier way?
Thanks!
Actually you are floating only elements to the left without any wrapper element, so what happens is this..
Instead, wrap the other 2 elements inside a wrapper element and than float it to the left
.left_wrap {
float: left;
width: 30%;
}
.right_wrap {
float: left;
width: 70%;
}
.right_wrap > div {
border: 3px solid #ff0;
height: 100px;
}
<div class="main">
<div class="left_wrap">
Hello
</div>
<div class="right_wrap">
World
<div></div>
<div></div>
</div>
</div>
Demo
Better Demo
If you want even a better one, I would suggest you to wrap the boxes inside the parent containers, and instead of floating the child elements, float the parent.
Demo
Also, don't forget to clear your floated elements, just make sure you clear them, you can use a self clearing parent CSS like
.clear:after {
content: "";
clear: both;
display: table;
}
And call the above class on the element containing floated elements as their children, where in this case, it's <div class="main"> so it should be now
<div class="main clear">
<!-- Floated Elements -->
</div>
I'm not quite sure if this is what you mean but try:
#node-29{
float: right;
clear: left;
margin-left: 0;
}
This will position the div's next to each other and keep the main content to the right.
This can be quite complex depending on your existing theme.
I wrote this page a while back to shows you how you can do that.
http://linux.m2osw.com/3columns
More or less you need a first div that encompasses the left column and the content. That div is the one that gets centered.
To make it simpler you can set a specific width to the div and you get something like this:
div.page
{
width: 900px;
margin: 0 auto;
}
That will center the main div.
For the column and the content, both are float: left; div's. In order to "close" the lot, you want another div just before closing the main div. That one has a style that ensures that the main div has the correct size: clear: both;.
we can use margins to set the div position .we can either specify fixed margins or we can give percentage value ,so that it will based on the total size of the screen.
<!DOCTYPE html>
<html>
<head>
<style>
#main
{
background-color:yellow;
}
#main
{
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
}
</style>
</head>
<body >
<div id="main">
this is how we can display main div in centre
</div>
</body>
</html>
I am trying to create something like a gallery that shows different number of images per row based on the width of the browser. This has already been achieved using overflow: hidden in the outer div and float: left in the inner div.
However, what happens with this is that my images are always aligned to the left, leaving alot of whitespace on the right. How do I make it such that the gallery is always centered in the screen no matter how many images there are per row.
My code is on http://codepen.io/anon/pen/KzqAs
Thank you very much. :)
How about this: http://codepen.io/anon/full/mtBbF
HTML
<div class="container">
<div class="red box">red</div>
<div class="blue box">blue</div>
<div class="black box">black</div>
</div>
CSS
body{
text-align:center; /*You would need to define this in a parent of .container*/
}
.container{
display: inline-block;
margin: 0 auto;
text-align: left;
}
.box {
width: 300px;
height: 300px;
float: left;
}
Demonstration
You need to use an id(or class) on the main div. Set width: 300+px and margin: auto
Also your boxes should be with display: inline-block to allow them to begave "inline"
I have changed colors of the boxes a bit for better visibility.
I have a clear floats problem I can't figure out. This is the HTML code:
<div id="main">
<div id="primary">
<div id="content" role="main">
</div><!-- #content -->
</div><!-- #primary -->
<div id="secondary">
<div><!-- #secondary -->
</div><!-- #main -->
This is the CSS for each element:
#main {
clear: both;
}
#primary {
float: left;
width: 100%;
margin: 0 -40% 0 0!important;
}
#content {
background: none repeat scroll 0 0 white;
box-shadow: 0px 10px 10px 2px #888;
float: left;
margin: 0 12.3%!important;
position: relative;
width: auto;
}
#secondary {
float: right;
margin-right: 15%;
width: 22%;
position: relative;
padding-top: 170px;
}
The website is build on wordpress so main starts in header.php and ends in footer.php. The primary and content divs start and end in each page template and the secondary div is called in each page template (get sidebar) after the primary div ends.
The problem is that the content div stops right after the primary div ends, while the secondary div goes on extending below. The content div should extend until the end of the document where the secondary or main div ends.
You can view the code live and the problem it's causing on this website.
Its because of float
give overflow property to your parent.
or create an extra div and give clear:both
One of the common problems we face when coding with float based layouts is that the wrapper container doesn't expand to the height of the child floating elements.The typical solution to fix this is by adding an element with clear float after the floating elements or adding a clearfix to the wrapper. But you can also use the overflow property to fix this problem. It's not a new CSS trick either. It's been documented before long long ago.
I think the problem is that the 'secondary' element isn't contained within the 'content' element' on your site so obviously 'content' won't grow to accomodate 'secondary'.
You need to have a rethink of your html structure.
Parent elements are never to expand to contain floated elements. To have that element expand to contain them, you add overflow: auto to the parent so the floated element overflowing the element will be contained in most cases. I was unable to find an element to apply that to so you may have done other things to cause this. position:absolute has the same issue where it is taken out of the normal flow and parent elements will not contain them.
The clear property in css needs to be applied to a new div in your code. It works by starting the div below all floating elements within the parent element. It would look something like this:
<div id="main">
<div id="primary">
<div id="content" role="main">
</div>
</div>
<div id="secondary">
<div>
<div style="clear: both"></div> <!-- Don't do inline styles -->
</div>
That should do it. You also should take out the clear: both on #main's CSS. It's not necessary.