I rounded my buttons via CSS and now they cascade - css

Question

I used the two border options to round various buttons in my site and because of this, they now cascade by roughly one line break. (See image: http://gyazo.com/14af343dea8b280262f6c88465659c42 )
The HTML and CSS is pretty much the same for each button, so I posted an example. Any ideas on why this is happening (I imagine it's the div tags) and how I can stop it?
EDIT - JS Fiddle upload: http://jsfiddle.net/4phcS/
CSS:
#linkwordpress
{
color:white;
background-color:#5C0DAC;
font-family:Arial, Sans-Serif;
font-size:18px;
text-align:center;
width:100px;
height:30px;
position:relative;
top:-90px;
left:500px;
line-height:28px;
border:2px solid;
border-radius:25px;
}
HTML:
<div id="linkwordpress">
Wordpress
</div>

Answer 1

Don't use id's (#), use classes instead as follows:
.header {
color:white;
text-align:center;
background-color:#5C0DAC;
font-family:Arial, Sans-Serif;
font-size:30px;
padding:0px;
margin-bottom:10px;
height:38px;
width:800px;
border:2px solid;
border-radius:25px;
display: inline-block;
}
And use display: inline-block.
<div class="header">
Leon's CS150 Assignment
</div>
<div class="header">
Leon's CS150 Assignment 2
</div>

Answer 2

Your question is a little vague, but if I had to guess I would say that the fact that you are using a div is probably why.
Divs inherently have a display:block. Try changing the display to inline or inline-block.
#linkwordpress
{
color:white;
background-color:#5C0DAC;
font-family:Arial, Sans-Serif;
font-size:18px;
text-align:center;
width:100px;
height:30px;
position:relative;
top:-90px;
left:500px;
line-height:28px;
border:2px solid;
border-radius:25px;
display:inline;
}
or if your id #linkwordpress is just a container then add the display:inline; or display:inline-block; to the anchor inside of the div instead like so:
#linkwordpress a {
display:inline-block;
}
The best solution would be to remove the <div> from around the anchors entirely and negate the problem you are suffering with the display property. Like this:
<nav>
<div>
<a class="Menu-Item" href="#">Home</a>
<a class="Menu-Item" href="about.html">About</a>
<a class="Menu-Item" href="cv.html">CV</a>
<a class="Menu-Item" href="../wordpress">Wordpress</a>
<a class="Menu-Item" href="../webshop/catalog">Webshop</a>
</div>
EDIT:
After examining your code I noticed several issues you were running into that were breaking the navigation. I've attached a new JSFiddle that I think accomplishes what you are looking for and will attempt to explain some of the changes below:
http://jsfiddle.net/Incredulous/j4ZbT/
You had free floating elements in your <div id="container"> that needed to be put into another div and treated as a column.
I added 2 divs to your code:
<div id="col2">
<div id="sideboxhead">Who am I?</div>
<!-- lots of content here -->
</div>
<div id="col1">
<div id="header2">Home</div>
<!-- lots of content here -->
</div>
Then added the matching CSS to treat these as columns:
#col1 { float:left;width:644px;}
#col2 { float:right; width:145px;}
I also altered all of the width properties of divs in #col1 so that I could apply the width to the entire column instead.
I removed all of your top:XXpx; values because you were artificially attempting to create/reduce space and instead added a margin value to the nav element that can be negative instead.
Lastly I removed all of your left values and instead added float to the columns. If you still want the offset of your center content area you can add another container div around both of the #col2 & #col1, make its width less, then change the width of #col1 by the difference of old width - new width.
Hope this helps.

Answer 3

Update:
After reading your comment, the reason your items are vertical rather than horizontal is because the element that contains your navigation requires one of these two tags:
display: inline;
display: inline-block;
Those two items force the items to remain on the same line, rather then constantly drop to a new line. Think of a nesting doll, each doll is one layer deep diving further and further into the doll. Same applies to html, so to counter act that line drop per an element you modify the dimensions, float, or display to cater the design to your entire goal.
I'm still not entirely sure what your attempting to create, or do. Is this more inline of what your trying to accomplish? Fiddle
When you look at the code it isn't all that much different then yours. One of the primary differences, is that nav is simply a div but it is anchoring to the parent element. In this case header. So I define this element as a position: absolute; which will allow more finite control over the entire menu structure.
Then for large menu's and refactoring sometimes it is better to utilize a div over the traditional ul or plain a href. This will add a higher level of control yet again over your menu structure.
Also you'll notice that I don't use Id. That is because an Id is only allowed on a single page, it is unique. Which means it can't be utilized more than once. A class can be, which is more inline for a repetitive values throughout your page.
I'm still not entirely sure of your goal and or poor wording of the question, but hopefully this points you in the proper direction:
header {
width: 100%;
height: 100px;
background: #5C0DAC;
}
h3 {
font-family: Arial, Sans-Serif;
color: white;
text-align: center;
}
nav {
width: 100%;
height: 10%;
position: absolute;
left: 85px;
}
.Menu-Item {
width: 100px;
height: 30px;
padding: 10px 35px;
border-radius: 25px;
display: inline;
margin: 0px 15px;
box-shadow: 0px 3px 6px 0px;
position: relative;
}
a {
font-family: Arial, Sans-Serif;
text-align: center;
line-height: 28px;
color: white;
}
The html:
<header>
<h3>Leon's CS150 Assignment</h3>
<nav>
<div class="Menu-Item">
Home
</div>
<div class="Menu-Item">
About
</div>
<div class="Menu-Item">
CV
</div>
<div class="Menu-Item">
Wordpress
</div>
<div class="Menu-Item">
Webshop
</div>
</nav>
</header>