Trying to move some Nav Bar links around within a div, and they are not responding. Can anyone please offer any assistance on this? margin-top seems to be doing nothing. New to CSS.
CSS
#nav {
height: 70px;
vw: 100%;
background-color: hsla(0, 0%, 83%, .7);
margin-left: -10px;
margin-top: -16px;
margin-right: -10px;
border-bottom: 1px black solid;
}
li {
list-style-type: none;
display: inline;
font-family: Helvetica, sans-serif;
font-size: 20px;
padding-right: 20px;
color: hsl(0, 0%, 50%);
margin-top: 10px;
}
li:hover {
color: white;
}
HTML
<header>
<div id="nav">
<ul>
<li>About</li>
</ul>
</div>
<h1>Hi. This is my playground.</h1>
</header>
<div id="me">
<img src="dp.jpg">
</div>
The margin property doesn't affect inline elements, therefore it doesn't work.
Margin properties specify the width of the margin area of a box. The 'margin' shorthand property sets the margin for all four sides while the other margin properties only set their respective side. These properties apply to all elements, but vertical margins will not have any effect on non-replaced inline elements. http://www.w3.org/TR/CSS21/box.html#margin-properties
Also see this answer as to why dimensions cannot be set on inline elements.
To solve this, you can either change li to display:inline-block. (example) - it works.
Alternaetively, you could also float the li elements, having the same desired effect. (example)
In the #nav you have a typo:
vw: 100%;
Related
The following image represents the desired outcome.
Typically I'd apply such case using 3 divs:
<div class="holder">
<div class="edge left"></div>
<div class="content">background color or image stretched here</div>
<div class="edge right"></div>
</div>
This sounds like an overuse of semantics, so I decided to try using border-image, and this is the end result:
But, if I set a background color, it will act as a background for the borders too (can be solved using JPEG instead of PNG with a white background -but this isn't a solution-).
Any ideas or suggestions? Is the use of border-image recommended in the first place (any browser rendering variability?).
The image used and code are below:
<ul id="nav">
<li>Test data Test data Test Data</li>
</ul>
#nav {
border-width: 0px 38px;
border-image: url(images/nav-border.png) 0 50;
height: 30px;
}
https://jsfiddle.net/y7g7w1b3/
Solution 1: Using fill and stretch for border image
You can do this with border-image property itself by using the following settings:
The value fill for border-image-slice. (Make sure that slice is less than half the width of the original image). You can find more details about this option in MDN.
The value stretch for border-image-repeat.
This works in IE11, Edge, Firefox v45, Opera v36, Chrome v51 (dev-m).
#nav {
border-width: 0px 38px;
border-image: url(http://i.stack.imgur.com/5foMd.png);
border-image-width: 34px 98px;
border-image-slice: 17 48 fill;
border-image-repeat: stretch;
height: 30px;
}
#nav li {
line-height: 30px;
}
#nav li a {
color: white;
}
<ul id="nav">
<li>Test data Test data Test Data
</li>
</ul>
Solution 2: Using background color
But, if I set a background color, it will act as a background for the borders too
You can actually clip the background-color such that it doesn't cover the borders. This option can work as long as the shape's background is a solid color.
#nav {
border-width: 0px 38px;
border-image: url(http://i.stack.imgur.com/5foMd.png) 0 50;
background-color: rgb(34,34,34);
background-clip: padding-box;
height: 30px;
}
#nav li {
line-height: 30px;
}
#nav li a {
color: white;
}
<ul id="nav">
<li>Test data Test data Test Data
</li>
</ul>
I wouldn't use border image, instead I would use :before and :after. This creates 2 additional elements before and after your container.
Code below:
.container{
position: relative;
}
.container:before,
.container:after{
position: absolute;
top: 0;
bottom: 0;
content: "";
display: block;
width: 50px;
}
.container:before{ right:100%: }
.container:after{ left: 100%; }
This will create the before and after elements for your container on each side. Then you can style the two elements as required.
You can use a 1px background-image to act as your background-color (I used black in my example, embedded as base64) then combine background-size, background-repeat and background-position to achieve your goal:
Something like:
#nav {
background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=);
background-repeat: repeat-y;
background-size: 100%;
background-position: center center;
border-width: 0px 38px;
border-image: url(images/nav-border.png) 0 50;
}
See Fiddle
I'm trying to get the white background behind the title to remain at the width of the text, not run all the way to the right of the screen, as it's doing now:
http://www.jmakhotels.com/post-ranch-inn-california-big-sur-new/
It should look like this: http://www.jmakhotels.com/images/title-tag.jpg ... but I can't figure out how to set the width so that it's dynamic for the different title lengths. This should be simple, but it's driving me insane! That .header-title element should simply be the width of the text + 10x padding on the left and right.
Here's the CSS for the blue div (which will be an image bgd), and the title element:
.main-header {
background-color: #009cff;
width: 100%;
height: 300px;
}
.header-title {
margin: -58px 0 0 18px;
padding:10px;
background-color: rgba(255,255,255,.8);
width:auto;
}
Thanks so much to anyone who can help me figure this out.
Setting display:table on the .header-title rule will fix the issue (without messing the margins).
Your .header-title (h2) is a block element, it should be a inline-block element to grab the width of the element itself.
However, your header-title can be placed inside the main-header instead of below the element.
A quick fix would be to move the .header-title element from below the .main-header div to the inside:
<div class="main-header">
<h2 class="header-title">This will be the title</div>
</div>
You want the header title to stick to the bottom of the main header, you can do this by giving it an absolute position. First we need to give the main header a relative position:
.main-header {
position: relative;
}
Now we can position header-title to the bottom of the main-header element:
h2.header-title {
position: absolute;
bottom: 0; <- stick to the bottom of main-header
left: 1em;
}
You can remove the margin from the header-title class in your CSS, because you're already telling header-title to stick to the bottom of main-header.
Change .header-title to display:inline-block then add margin-bottom: -36px; to .main-header
So:
.main-header {
background-color: #009cff;
height: 300px;
margin-bottom: -36px;
width: 100%;
}
.header-title {
background-color: rgba(255, 255, 255, 0.8);
display: inline-block;
margin: -58px 0 0 18px;
padding: 10px;
}
Also don't need width:auto
Try adding the style display: inline-block;
I am assuming .header-title is being used on a div that surrounds the title. You also shouldn't need width: auto;
I have a list which has round elements in it. They have a image in the background and on hover the other div is supposed to become visible as an overlay. It works so far, however there is still a visible border, indicating that the hovered div is not perfectly overlaying the other rounded element.
HTML:
<ul>
<li>
<div class="hover"></div>
</li>
<li>
<div class="hover"></div>
</li>
<li>
<div class="hover"></div>
</li>
</ul>
CSS:
ul {
margin: 0;
padding: 0;
list-style: none;
font-size: 0;
height: 140px;
}
li {
width: 140px;
height: 140px;
margin: 0;
padding: 0;
display: inline-block;
border-radius: 70px;
background: url(http://www.nationalflaggen.de/media/flags/flagge-thailand.gif);
}
.hover {
border-radius: 70px;
width: 140px;
height: 140px;
}
.hover:hover {
background-color: rgba(255,255,255,.9);
}
I added a fiddle since I really don't know how to make them perfectly overlapping.
Thanks for your help.
UPDATED THE FIDDLE:
http://jsfiddle.net/pL9Aa/1
Looks like a sub-pixel problem -- the browser does a bunch of math to determine the smoothness of a curve using square pixels. And sometimes it doesn't render how you might expect.
You can simply remove the border-radius rule from the :hover pseudo class if you are keeping it transparent.
.hover {
width: 140px;
height: 140px;
}
Fiddle
If it needs to be round, I would override your image using the same element, instead of a nested element, like so:
li:hover {
background: white;
}
Fiddle2
You could add:
li:hover {
background:none;
}
to ensure that the background on the li is gone.
It's weird though - does look like a rendering bug.
Assuming that you are going to have text or other content in the overlay, it's worth noting that setting the background to be slightly transparent (e.g. rgba(255,255,255,0.8)) makes the rendering error less noticeable.
Just change #hovers border-radius: 62px;
If your hover is only meant to cover the element, you do not need to put a border-radius on the hover element. Simply removing that line will resolve your issue:
.hover {
width: 140px;
height: 140px;
}
http://jsfiddle.net/pL9Aa/3/
If in the production envirionment you can actually use a background color, you could also use a box-shadow
demo: http://jsfiddle.net/j4NFB/
.hover:hover {
background-color: #FFF;
box-shadow: 0 0 0 1px #fff;
}
<div class="titelcontent">
<div class="name">Name</div>
<div class="hzline"></div>
</div>
I want name div and hzline div to auto fit 100% in titelcontent.
The label (for example, Name) will vary in length and I want the red underline to span the remainding space of the titlecontent div.
How do I achieve the following? It is easy to do this using tables but I can't figure out how to do this via span or div.
You can use div like a table by using table-cell.
.titlecontent {
display: table;
}
.name {
display: table-cell;
white-space: nowrap;
}
.hzline {
display: table-cell;
border-bottom: 3px solid red;
width: 100%;
}
See DEMO.
Updated to allow background images to show through
You can make the mark-up a bit tighter by using a pseudo-element as follows:
<div class="wrapper">
<div class="inner">Photoshop</div>
</div>
and use the following CSS styling:
div.wrapper {
color:#82439a;
font-size: 16px;
font-weight: bold;
font-family: tahoma;
line-height: 180%;
background: red url(http://placekitten.com/1000/500) no-repeat left top;
overflow: hidden;
}
div.inner {
position: relative;
display: inner;
color: yellow;
padding-right: 0.50em;
border: 1px dotted yellow;
}
div.inner:after {
content: "\A0";
position: absolute;
bottom: 0;
left: 100%;
border-bottom: 5px solid #d71d00;
width: 1000%;
}
Demo fiddle: http://jsfiddle.net/audetwebdesign/wE8bC/
How It Works
The parent element div.wrapper may contain a background image or be transparent and show the background of some ancestor element. You need to set overflow: hidden.
For the label (<div.inner>), set position: relative and then generate a 100% width pseudo-element with a bottom border to serve as an underline. Use absolute positioning to place div.inner:after to the right of <div.inner> (left: 100%) and make the width relatively large. The pseudo-element will trigger an overflow condition but this is taken care of by hiding the overflow in the parent element. You can control left/right spacing using padding.
You can use set the display property to either inline or inline-block. If you use display: inline, it will work in IE7; adjust the line height as needed for styling.
Note that the generated content is a non-breaking space, hex code "\A0".
Support for IE7
If you need to support IE7, you will need a hack if you use inline-block as discussed in a previous question: IE7 does not understand display: inline-block
IE7 also does not support table-cell so some of the other posted solutions will face the same limitation.
Or an alternative to using display: table:
.name {
float: left;
}
.line-wrapper {
display: block;
overflow: hidden;
padding-top: 6px;
}
.hzline {
border-bottom: 3px solid red;
width: 100%;
}
See example.
I've guessed you are looking something like this. Please find my solution based on my understanding about the image you posted.
HTML
<div>
<span>Photoshop</span>
</div>
<div>
<span>Adobe Illustrator</span>
</div>
<div>
<span>3D Max</span>
</div>
<div>
<span>Maya</span>
</div>
<div>
<span>Windows 8 Pro</span>
</div>
CSS
div {
line-height: 150%;
border-bottom: 5px solid #d71d00;
}
div span{
position:relative;
bottom: -10px;
background:#fff;
padding: 0 5px;
color:#82439a;
font-size: 16px;
font-weight: bold;
font-family: tahoma;
}
Please do let me know your feedback. Thanks
I'm trying to get h1 to appear on the left and h2 on the right, which I've managed to do thanks to a previous post on stackoverflow. But now there is this white line showing up under the text that is seriously messing with my design. Any thoughts?
<div id="container">
<div id="header">
<h1 style="text-align:left;float:left;">Ken DeRosier</h1>
<h2 style="text-align:right;float:right;">Master Sculptor</h2>
<hr style="clear:both;">
<!-- end #header -->
</div>
...
</div>
This is all the CSS I can think of that could be affecting the code above.
body {
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #FFFFbb;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
background-color: #000000;
background-repeat: no-repeat;
background-position: center top;
background-image: url(../images/sunriseHeader.jpg);
}
.thrColLiqHdr #container {
width: 80%; /* this will create a container 80% of the browser width */
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 0px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
}
.thrColLiqHdr #header {
padding: 0 10px;
padding-top: 170px;
padding-right: 20px;
}
.thrColLiqHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
Try replacing this line
<hr style="clear:both;">
with this
<div style="clear:both;"></div>
I think this is because you use a <hr> aka "horizontal rule". Why don't you try to use a span or a div or something else to clear which is not intended to display itself with something visible?