build repeat-x header - html

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.

Related

Content not staying in their divs on resize

I have 3 boxes with backgrounds that change color on mouseover. Above their backgrounds are placeholder images for now. I'm using vw for the backgrounds so that when the window is resized they change size to match.
I'm trying to get the images to align to the center of the box and to resize according to their boxes.
Here's my JSFIDDLE
<div class="socialbox">
<ul class="socialNavList">
<li class="navlinkedin">linkedin</li>
<li class="navtwitter">twitter</li>
<li class="navfacebook">Facebook</li>
</ul>
</div>
Try adding image as background to anchor tags like this:
ul.socialNavList li.navfacebook a {
background: #ccc url('http://lorempixel.com/output/nightlife-q-c-32-32-1.jpg') no-repeat;
background-size: 85% 85%;
}
This way you have responsive background.
Here is a FIDDLE to try it.
Notice I added just for the third item, to show you the effect.

CSS background distorted upon hover

I came accross this problem while adding anchor elements to a section for a menu. I want each element to display a transparent block of color behind it when the mouse is hovering over. At the same time, I want the page background to have stripes from CSS (background: linear-gradient; or background:repeating-linear-gradient;) (I run into this problem with either). When I have a link on top of these vertical stripes and I hover over it, the underlying stripes are shifted in one direction by about a pixel. Its a very small effect but none-the-less frustrating. I have removed all other elements from the html and css that are not involved in this issue and placed the resulting files in this jsfiddle: http://jsfiddle.net/bw9fk0y4/5/
body {
margin: 0px;
padding: 0px;
background:
repeating-linear-gradient(90deg,transparent, transparent 2%, rgba(0,0,250,0.2) 2%, rgba(0,0,250,0.2) 4%, transparent 4%);
}
div nav{
position: relative;
left: 250px;
}
div nav a{
margin: 5px;
display: inline-block;
padding: 10px;
}
div nav a:hover{
background-color: rgba(250,250,250,0.4);
}
<body>
<div id = "container">
<nav>
link 1
</nav>
</div>
</body>
What I have found is that for some reason I don't run into this effect when the anchor is further to the right of this page. If it is centered or closer to the left side or even centered I do have this effect, even if I position it by setting a fixed width and the in CSS (margin: 0 auto;). If anyone knows of a way to aleviate this problem I would be very happy. This is only happening in chrome. I've tried using the browser specific gradients, no difference. I am afraid that this is just a result of CSS gradients not behaving well, because they seem to misbehave quite easily when played around with, but they are too convenient for me to give up on them easily.

Creating a dynamic image in HTML with a transparent background

Let's say I'm making a Valentine's Day app. I want a heart to fill up with pink from 0 to 100 to show one's love for another.
The height of the image will be 102 pixels, and for every % someone is "in love", we will creep up a single-pixel height line.
My approach is as follows: go into Photoshop and remove the 'background' of the inside of the heart, so that the inside is now transparent. The area of the surrounding heart will be painted white. Put on a site with a white background. Put the image on a 102 x (whatever) div, then put another div inside, whose background color is pink. It's then a simple matter of increasing the child div's height.
This is nice, but I can only use it on sites which have a white background, because it's the white that's preventing the area from turning pink. In short, I need a way to fill up this heart while being able to change the background color of the web page.
Create the heart as you normally would making the background transparent and fill in the center. Use that as the background image of a div and position it at the bottom.
The example below shows a heart at 40%.
HTML
<div class="heart-wrap">
<div class="heart" style="height: 40px; margin-top: 60px;">
</div>
</div>
CSS
.heart,
.heart-wrap {
width: 100px;
height: 100px;
}
.heart {
background: transparent left bottom url('/heart.png');
}
Demo: http://jsfiddle.net/UFBjh/
Demo2: http://jsfiddle.net/L5uDp/
Check out this demo. This is probably what you want - http://jsfiddle.net/Rhpyp/
The solution involves drawing out the heart using CSS3 using the technique mentioned in http://www.webfroze.com/css/heart-shape/
And then having an outer div handle the partial hiding of the heart as needed.
The color of the heart as well as the DIV that is used for partially hiding it is editable via CSS.

HTML/CSS - Image inside a li element from the navigation bar

I have a navigation bar, and underneath a black div on which the drop-down elements from the navigation bar drops. This is not the main function of the black div. It is just for design, but it works really well. You can see here what i am talking about: http://www.ecoloc.ro/interior/test/regeneration . Now, what i want to do is that every time a main element from the navigation bar is hovered, an image big enough to cover the main element and a part of that black div beneath it will appear. You can see in the link that i posted, on that black gap i want the image. Can this be done?
Thank you!
You can change the dimensions of the <a> inside the <li> and set a background image for it. If you don't want the main menu word to appear, you just set `text-indent: -9999px´ on ´:hover´ (image replacement technique).
The best way to set the modifications on hover and come back to normal on hout is to create different classes with the styles. So you change the class via JavaScript on hover, changing the dimensions automaticaly.
Since you already use absolute positioning for your "submenu" list, you should be able to do it with a little CSS.
Provide a background-image: for the list element that contains your desired graphics, set background-repeat: no-repeat, set an absolute height: and re-position your list to the correct top:, left: corner. Use margin: and padding: to get the list elements into their correct position.
-- Update: --
Try the following quick and dirty first sketch to see if I got the idea:
<ul id="media" style="position: absolute; top: 108px; left: 1018px; height: 35px; background-color: red; padding-left: 131px; padding-top: 35px; ">
<li>presa</li>
<li>video</li>
<li>foto</li>
</ul>
The submenu covers your main menu entry and the black submenu bar. Provide an image that covers exactly the areas you want and fine tune the positioning.

Get Background Image to Stop Tiling at Certain Point

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.