I'm having a problem with positioning my navigation element.
CSS:
#wrapper { width: 600px; margin: 0 auto; height: 300px; background: #f9f9f9; border: 1px solid #f0f0f0; }
#navigation { margin: 0 auto; text-align: center; }
.mylink { background: #666; color: #ccc; padding: 5px 10px; display: inline-block; }
.mylink:first-child { -webkit-border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; border-top-left-radius: 10px; }
.mylink:last-child { -webkit-border-top-right-radius: 10px; -moz-border-radius-topright: 10px; border-top-right-radius: 10px; }
HTML:
<div id="wrapper">
<div id="navigation">
<a class="mylink">Homepage</a>
<a class="mylink">Second Page</a>
<a class="mylink">Third Page</a>
</div>
</div>
I want to remove the margins on the inline elements.
I tried a "float:left" variation too. But than I can't center the elems without a width value.
Any ideas how i can solve it?
That's a common problem with 'inline-block'. You're not dealing with a margin, but an actual space character.
This should help: http://css-tricks.com/fighting-the-space-between-inline-block-elements/
You don't have a margin, inline elements just take whitespace (spaces, tabs, newline, whatever other invisible separators might be there) into consideration, either use block display and floats or type it without whitespace, updated your fiddle http://jsfiddle.net/Rnmbx/1/
Related
Trying to display a list of upcoming events, showing the date(s), an icon, and a brief description. All of these should line up side by side, like columns, but when the description wraps, it falls down to the next line. This is probably insanely simple, but I've tried various combinations of float and inline-block with no success.
<div class="events">
<ul class="list-unstyled">
<li>
<div class="event-date">Jun 16 -
<br />Jun 27</div><i class="glyphicon glyphicon-star">a</i>
<div class="event-text">Opening Day for Faculty and Staff</div>
</li>
<li>
<div class="event-date">Sep 10 -
<br />Oct 08</div><i class="glyphicon glyphicon-star">b</i> <div class="event-text">Coffee with a Cop, 7:45 a.m. # Cafeteria Courtyard</div></li>
<li>
<div class="event-date">Mar 12</div><i class="glyphicon glyphicon-ban-circle">c</i> <div class="event-text">Labor Day: Campus Closed</div></li>
</ul>
.list-unstyled {
list-style: none outside none;
padding-left: 0;
}
.events li {
border-bottom: 1px solid #4188d6;
margin-bottom:10px;
}
.event-date {
background-color: #74a2c2;
border-radius: 3px;
color: #ffffff;
display:inline-block;
font-weight: bold;
margin: 0px 10px 10px 10px;
padding: 5px;
width: 65px;
vertical-align:top
}
.event-text {
vertical-align:top;
display:inline;
border:1px solid green
}
i {
display:inline-block;
vertical-align:top;
border:1px solid red
}
http://jsfiddle.net/d4h2A/1/
Using your existing HTML (good as is), try the following CSS:
.list-unstyled {
list-style: none outside none;
padding-left: 0;
}
.events li {
border-bottom: 2px solid #4188d6;
margin-bottom:10px;
overflow: auto;
}
.event-date {
background-color: #74a2c2;
border-radius: 3px;
color: #ffffff;
font-weight: bold;
margin: 0px 10px 10px 10px;
padding: 5px;
width: 65px;
float: left;
}
.event-text {
overflow: auto;
border: 1px dotted gray;
}
i {
float: left;
vertical-align:top;
border:1px solid red;
margin-right: 10px;
}
See demo: http://jsfiddle.net/audetwebdesign/y54Zb/
To allow for a fluid width of .event-text, start by using float: left for .event-date and i (optinally, add a right margin as needed).
To contain the floated elements within the li blocks, use overflow: auto.
Finally, apply overflow: auto for .event-text to keep the text from wrapping around the floated elements.
The net result is that as you shrink the window width, the text will start wrapping at the left edge next to the icon. As you expand the window, the text will simply stay on a single line for a wide enough window (use max-width if this is an issue).
You might want to set a min-width for the text block depending on your layout design.
I want to create a navigation bar where the text is centered, but my CSS code places the hyperlink at the top corner of the li as seen in the image.
CSS:
#navigation {
clear: both;
margin: 0 auto 5px;
margin-top: 0;
height: 6%;
padding: 0 5px;
position: relative;
z-index: 1;
}
#navigation a {
height: 10%;
width: 50px;
color: red;
vertical-align: center;
text-align: center;
text-decoration: bold;
}
li {
border-top: solid;
border-right: solid;
border-left: solid;
border-bottom: none;
padding-left: 1px;
height: 51px;
width: 18%;
background-image: url('../images/tab-selected.png');
background-repeat: repeat-x-y;
border-color: #F0F0F0;
display: inline-block;
padding-left: 1px;
}
HTML:
<nav id="navigation">
<ul>
<li >overview</li>
<li >overview</li>
</ul>
</nav>
There are various ways of vertically center something.
If you KNOW the words of the links and know they will not have a line break, you can add line-height:51px; to the anchor (which is the same height of the LI).
Here's the fiddle: http://jsfiddle.net/vMLpL/
By the way, tips for you:
For the border, you can use border:1px solid #f0f0f0; then just give none to bottom, like border-bottom:none; instead of declaring all sides.
When you want a BG to repeat both X and Y, the background-repeat is repeat only, not repeat-x-y.
For the vertical-align, there is no center. It's top, middle, bottom and baseline. But it work only for inline elements regard to other inline elements besides or for display:table-cell elements (which will work like a td's valign="middle" atribute).
Try this:
Remove the following from your "li" selector:
height: 51px;
Add the following to your "li" selector:
text-align: center;
line-height: 51px;
When I enter more than one line of content in the 'wrap' div it creates vertical space at the bottom of the div. How can I prevent this?
Screen shot
JSFiddle
HTML
<div id="widgets">
<div id="wrap">
<h1 class="name" >Models</h1>
<li>Rename a column</li>
<li>git add all new or modified files</li>
<li>Heroku assets:precompile plugin </li>
<li>Heroku tail logs</li>
<li>Rename a column</li>
<li>Heroku load db:schema </li>
<li>Heroku: connect to database </li>
<li>Postgres: show tables</li>
<li>git switch to a branch </li>
<li>add records from console </li>
</div>
</div>
CSS
#widgets {
margin: 15px 0px 50px 15px;
text-align: center;
}
#wrap {
margin: 15px 15px 0px 0px;
text-align: left;
width: 300px;
height: 300px;
padding: 1px 20px 5px 20px;
background: #ffffff;
border: 1px solid #fff;
border-radius: 5px;
display: inline-block;
}
#Arman P.'s answer works, but if you want to keep using your inline-block method instead of floats like you are now, you can just add this:
#wrap {
vertical-align: top;
}
Simply add float: left to your #wrap css declaration. Updated jsFiddle.
#wrap { float: left; }
I have create this block:
and I would have two parts in this block, like this:
here is my block:
<div id="content_sc" >
<img src='images/paypal-donate.jpg'>
</div>
and the css:
#content_sc {
top: 15px;
background: #fff;
width: 600px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
}
I tried a lot of things, but without achieving what I wanted to do
Here you go:
http://jsfiddle.net/VALCw/
Just a case of floating your two elements left and putting overflow on the container really.
I have a div inside of another div. #outer and #inner. #outer has curved borders and a white background. #inner has no curved borders and a green background. #inner extends beyond the curved borders of #outer. Is there anyway to stop this?
#outer {
display: block;
float: right;
margin: 0;
width: 200px;
background-color: white;
overflow: hidden;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#inner {
background-color: #209400;
height: 10px;
border-top: none;
}
<div id="outer">
<div id="inner"></div>
<!-- other stuff needs a white background -->
<!-- bottom corners needs a white background -->
</div>
No matter how I try it still overlaps. How can I make #inner obey and fill to #outer's borders?
edit
The following hack served the purpose for now. But the question stands (maybe to the CSS3 and webbrowser writers): Why don't child elements obey their parent's curved borders and is there anyway to force them to?
The hack to get around this for my needs for now, you can assign curves to individual borders. So for my purposes, I just assigned a curve to the top two of the inner element.
#inner {
border-top-right-radius: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px;
border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px;
}
According to the specs:
A box's backgrounds, but not its
border-image, are clipped to the
appropriate curve (as determined by
‘background-clip’). Other effects that
clip to the border or padding edge
(such as ‘overflow’ other than
‘visible’) also must clip to the
curve. The content of replaced
elements is always trimmed to the
content edge curve. Also, the area
outside the curve of the border edge
does not accept mouse events on behalf
of the element.
http://www.w3.org/TR/css3-background/#the-border-radius
This means that an overflow: hidden on #outer should work. However, this won't work for Firefox 3.6 and below. This is fixed in Firefox 4:
Rounded corners now clip content and images (if overflow: visible is not set).
https://developer.mozilla.org/en/CSS/-moz-border-radius
So you'll still need the fix, just shorten it to:
#outer {
overflow: hidden;
}
#inner {
-moz-border-radius: 10px 10px 0 0;
}
See it working here: http://jsfiddle.net/VaTAZ/3/
What would be wrong with this?
#outer {
display: block; float: right; margin: 0; width: 200px;
background-color: white; overflow: hidden;
}
#inner { background-color: #209400; height: 10px; border-top: none; }
#outer, #inner{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
If you want sharp edges on the bottom:
Use these :
border-top-left-radius: 10px;
border-top-right-radius: 10px;
-moz-border-radius-topleft
-moz-border-radius-topright
have you tried making the position:relative for the inner div ???
that is:
#inner {
background-color: #209400;
height: 10px;
border-top: none;
position: relative;
left: 15px;
top: 15px;
}
You can simply use
border-radius: inherit;
to follow the parent
.parent {
width: 100px;
height:100px;
border:1px solid green;
border-radius: 16px 16px 0 0;
padding: 10px;
}
.child {
width:100px;
height: 100px;
border: 1px solid red;
background: blue;
border-radius: inherit;
}
<div class="parent">
<div class="child">
</div>
</div>