I am trying to translate my PSD file to code and I am having problems with these headers. The header would contain the name of the header, and a horizontal purple bar that stretches from the right side of the end of the name to the end of the div. I am using Foundation (responsive framework) and so I have given my header a width of three columns. I have written some code, but I am unsure how to get the purple line to not appear under the title name.
Currently, I have saved the purple line as a tileable image and set it as the background of the h3 tag. I have tried to play with the background position, but I cannot get the line from not appearing under the title name.
Here is a screenshot of part of the PSD file. To clarify, the purple bar next to Hours, Phone, and Location is not for the user to type any information onto; it is a decorative piece used to separate the different regions of information.
My code:
<div class="row">
<div class="three columns offset-by-one contact">
<h3>Hours</h3>
</div>
</div>
.contact h3 {
color: #444;
background: url(../img/purpleLine.jpg) bottom right repeat-x;
}
This would be a perfect time to use the HTML element <span> as this is pretty much exactly what it is meant to do. After the element, add <span></span>, give it the desired width you want, and set the background image for the span element. Not sure how your framework classes would be used to define the width, so I just put 'whatever' in that part. You might even be able to assign a class to the span element to define its width.
HTML:
<div class="row">
<div class="three columns offset-by-one contact">
<h3>Hours</h3><span></span>
</div>
</div>
CSS:
.contact h3 {
color: #444;
}
.contact span {
width:whatever;
background: url(../img/purpleLine.jpg) bottom right repeat-x;
}
Just make a div that has a bottom border of the purple colour and thickness you want. Then float it left and that would give you your desired affect. You can then also place a text box inside that div if need be.
Related
I just made a div-link with an image src. Almost everything is ok nevertheless the image-link-div, although its positioned just where i want to it to be, covers (as a link) an entire row from left to right, like it is using an entire line. Any object I put near the code gets placed after (above) or before (bottom) of this invisible link row. Any help ?
**The image its just the Google homepage logo on every navigation:
white background
properties:
width - 70px
height - 38px (auto stretched on paint, saved as .jpg)
CSS:
.box4
{
margin-left: 0%;
margin-right: 80%;
display: block;
}
HTML:
<div class="box4" onclick="location.href='https://www.google.cl'" style="cursor:pointer;"> <img src="Imagenes/Google.jpg"> </div>
In short, the problem with your div-link :
<div> uses by default display: block, you don't need to define it for divs
all of your other "boxes" use float: left which reduces width of block to it's minimum if width is not specified and removes what you call "invisible link row"
learn more about display and float attributes, it's hard to create a layout if you don't know absolute basics of CSS
On this one particular page, I have added a secondary menu (gray bar) under the primary menu (red bar) to have a few links that, when clicked, will scroll down the page to the correct area.
The secondary menu was, by default, much taller than I wanted it - so by adding a height: 40px; value, I was able to get it to the height I want. The page links, however, stubbornly did not adjust along with the height of the menu and thus, when viewed, they are obviously not in the correct place.
Is there a particular CSS value I can add to try and help this issue? I've tried adjust margin-top, padding-top, vertical-align, etc... and some of that adjusts the gray bar, but absolutely nothing has yet to adjust the text for me.
It doesn't help that I'm using a paid theme I bought rather than one I developed myself (in an attempt to make site management easier for someone else who takes over the site, this is more of a "drag-and-drop" template).
http://www.miltonpreserve.com/about/
It looks like you added the 40px height to the div with the #aboutmen id. However, some of the content nested in that div has padding that makes it taller than that. If you remove the padding from #menu-about-menu you should see the text become visible. Then (if needed) you can add 'vertical-align: middle' to the elements that you have nested in #menu-about-menu.
Here's a simplified version of what you have going on:
HTML
<div class="outer">
<div class="inner">
<div class="text">item one</div>
<div class="text">item two</div>
</div>
</div>
CSS
outer {
height: 40px;
background-color: yellow;
}
.inner {
padding: 30px;
}
This simplified example has the same problem you're experiencing. If you remove the padding from .inner, you'll see that the problem goes away. Here's a
jsfiddle with the same code.
Hope that helps!
I have a li tag that when it's hovered over with the mouse the background image url is set to a dark brown arrow as seen in this image below.
As you can see, a black line is produced on the top right of the image. I have no idea how this is produced and I want the dark line removed. How do I fix it?
The CSS:
#topcol1navtall ul.contactsleftnav li.dash.selected {
background:#7c6a54 image-url('contact-arrow-nav.png') right no-repeat;
border-bottom: 2px dotted #f17ca6;
margin-top: 5px; padding-top: 8px;
}
The HTML:
<li class="contact">
<div class="text">
<span class="name">
<!-- / Dynamically loads edit form into right column -->
asdf, Billy 3
</span>
</div>
</li>
That line isn't black. It's the same color as your background, #7c6a54. Your image is either transparent in the first row of pixels, or it's one pixel too short and somehow anchored to the bottom of the containing li.
I would guess it's probably the latter. Your li is one pixel taller than the background image you're using. I would recommend making your background image taller than you need it be and then explicitly anchoring it either to the top or bottom of the containing element like so:
background: #7c6a54 image-url(your-url) right top no-repeat;. Then make the background image taller by a few pixels. Make sure the bottom angle doesn't suddenly turn into a vertical line or else you'll have a weird one-pixel bump there. Actually continue the angle so that you retain a smooth line on that end.
The other option is to explicitly declare the height of the li (making adjustments for your padding), but then you run into trouble if someone's browser renders text larger than you expect it to. If you're going to explicitly declare the height of the li, you should also explicitly declare the font-size and line-height of the text in the li (or they should inherit that from a parent element, but don't leave it to chance).
I have three divs, one hidden:
Parent
Message (hidden)
Image
I need to display Message when Image is hovered. That's usually a simple job, but I think the problem arises at the positioning of the divs.
I have an image at the upper right corner, and a text message should appear right next to it (to it's left, actually) when the image is hovered. Parent is a 100% x 32px bar, with position: fixed, so the icon and the message float around the whole page.
I've already tried plenty answers at SO. The only one that worked was using #parent:hover > div, but that makes the message show anytime the cursor hovers Parent, which is bad as Parent is a big invisible bar on the top of the page (should work well with shrinkwrapping, though, but I couldn't do it).
Here is the js fiddle. If you have any alternative approach please tell me.
EDIT: This is a example image of how it should work. It should also float and scroll with the page.
Switch the position of elements as mentioned in your style.
This is because you are using Adjascent Sibling selector +. “adjacent” means “immediately following,”
Demo
css
#img:hover + #msg {
display: block;
}
#Html Snippet
<div id="img">
<a href="some link here">
<img src="http://j.mp/18xsrJQ"/>
</a>
</div>
<div id="msg">
This should appear if icon is hovered.
</div>
To illustrate this:-
Consider this simple example :- To make the p immediately following the h3 tag appear in gray color. If you put p before h3 it wont work. That is how the Adjacent sibling selector works.
<h3>Hey, an H3 element</h3>
<p>Here's a paragraph which is short</p>
h3 +p {
color: gray;
}
I have some layout css questions. Their more like best practices and whats the most efficient way to build this. Let me start with a diagram of what I'm trying to achieve.
This header menu background will be liquid and the buttons inside it will be fixed. So really its made up of a left button independent of the gray style background. Then 3 or more buttons in the gray style background followed by some icons and a search filed, all within the gray background. My main issue is getting started with how to achieve the grey background expanding to the browsers width 100% and still having 2 rounded corners at each end.
Here is a pseudo html structure
<div id="menuHeader">
<ul>
<li class="">home</li>
<li class="">button1</li>
<li class="">button2</li>
<li class="">button3</li>
<li class="tools">
<div class="icon">icon1</div>
<div class="icon">icon2</div>
<div class="icon">icon3</div>
<div class="search"></div>
</li>
</ul>
Now the css issue where do I put my repeating background. If I put it on the menuHeader as a background image then its going to be one long repeating background graphic with no left and right corners.
Would I need to setup a div for left right and center. Then have my gray buttons inside that and my blue home button outside that center div to the left of the left div. Or is there a way to do it where I can use the existing tags I have now and not have to deal with extra empty div markup.
I'm sorry if I'm not more clear but the main question I think is clear how can I get the background graphic to have rounded corners along with repeating background. Then be able to add my buttons in as background graphics.
Update: this is not going to be html5 unfortunately
#menuHeader {
position: relative;
width: 100%;
background: url("bg.png") repeat;/*An image which has a width of 1px is sufficient*/
}
#leftSide, #rightSide{
position: absolute;
top: 0;
width: 20px;/*Whatever width*/
height: 40px;/*Whatever height*/
}
#leftside{
background: url("left.png") transparent;
}
#rightside{
background: url("right.png") transparent;
}
Add this HTML inside the div#menuHeader:
<div id="menuHeader">
<div id="leftside"></div><div id="rightside"></div><!--This location is chosen, so that the automatic z-indexing causes the background to stay at the background-->
....
</div>
Create two images (or one, to reduce server load, and use background-position). If you want to add that blue box, expand the left background-image. Make sure that the elements inside the div#menuHeader have a transparent or no background.