I've been trying to create a responsive navbar with just two images (which are hyperlinks and transparent) and I can't seem to get the formatting right. The way I want it to look is:
First image: width:60%
Second image: width: 40%
Both have the same height
Border: 2px solid black (around both images)
Padding: 10px (Around both images and between the two)
Keep the navbar on the top of the page
Hover effect that changes the background color
Basic Idea
The closest I've come is this code:
HTML:
<head>
<div id="outerdiv" class="navbar-fixed-top">
<img id="image1" src="image1.png" alt="Find"/>
<a href="add.php" > <img id="image2" src="image2.png" alt="Add"/></a>
</div>
</head>
CSS:
<style>
img{
display:inline-block;
border: 2px solid black;
background-color:#499FE2;
}
img:hover{
background-color: #91BCEE;
}
#image1{
width:60%;
float:left;
}
#image2{
width:40%;
float:left;
}
#outerdiv{
background-color: #black ;
}
a{
display: block;
}
</style>
The main problem I'm having is that I cannot figure out where to implement the padding so that it will separate the two images and surround them.
First you need to clean up you HTML code into valid HTML so that your CSS selectors are able to apply styles to the elements in the DOM. Remove the backslashes from your HMTL code to give you this;
<head>
<div id="outerdiv" class="navbar-fixed-top">
<img id="image1" src="image1.png" alt="Find"/>
<a href="add.php" > <img id="image2" src="image2.png" alt="Add"/></a>
</div>
</head>
Add a -4px left-margin to the images to counter the space used by the borders (this prevents the second image from going to next line since they occupy 60% + 40% of the entire page width, yet right + left borders of images take up 4px).
Also add display:block; property to the "#outerdiv" selector and change the value of the display property for the "a" selector to inline.
img{
display:inline-block;
border: 2px solid black;
background-color:#499FE2;
margin-left:-4px;
}
img:hover{
background-color: #91BCEE;
}
#image1{
width:60%;
float:left;
}
#image2{
width:40%;
float:left;
}
#outerdiv{
background-color:black;
display: block;
}
a{
display: inline;
}
see working snippet
img{
display:inline-block;
border: 2px solid black;
background-color:#499FE2;
margin-left:-4px;
}
img:hover{
background-color: #91BCEE;
}
#image1{
width:60%;
float:left;
}
#image2{
width:40%;
float:left;
}
#outerdiv{
background-color:black;
display: block;
}
a{
display: inline;
}
<head>
<div id="outerdiv" class="navbar-fixed-top">
<img id="image1" src="image1.png" alt="Find"/>
<a href="add.php" > <img id="image2" src="image2.png" alt="Add"/></a>
</div>
</head>
Related
I have 2 questions (more like 1.5)
1) What would be the correct way to modify the menu in the first picture to look like the one in the second. Since I put both the picture and the text in the same <a> tag I'm having problems with the white border (the icons are 30x30px, no transparent space around them or anything) :
HTML:
<div id="header">
<div class= "main">
<div class="logoHeader">
<img src="logo.png">
</div>
<div class="menuPicHeader">
<img src="stovyklae.png"><h2>stovykla</h2>
<img src="klubase.png"><h2>klubas</h2>
<img src="elparde.png"><h2>el. parduotuvė</h2>
<img src="kontaktaie.png"><h2>kontaktai</h2>
</div>
<div class="socialIconsWrapHeader">
<img src="yttop.png">
<img src="ftop.png">
</div>
</div>
</div>
CSS:
h2{
display:inline-block;
text-transform: uppercase;
text-decoration: none;
color: black;
margin-left:10px;
margin-right:10px;
font-size:14px;
}
.logoHeader{
margin-left:15px;
float:left;
margin-bottom: 20px;
margin-top:15px;
}
.socialIconsWrapHeader{
float:right;
margin-top:15px;
margin-right:20px;
}
.socialIconsWrapHeader a{
margin:0px 10px 0px 10px;
}
.menuPicHeader{
float:left;
margin:20px 0px 0px 130px;
padding-left:10px;
}
.menuPicHeader a{
padding-top:20px;
padding-bottom:2px;
}
2) I was wondering what should I use to get the text onto the picture as seen here:
Should I cut the picture in a half, get some div and stick it to the bottom of the picture using the grey half as background? Or somehow just write on top of the <a>?
HTML:
<div class="rightCol1">
<img src="pic1.png">
<img src="pic2.png">
</div>
CSS:
.rightCol1{
float:right;
margin-right:30px;
margin-top:10px;
}
1: add .menuPicHeader a{ margin-right: 20px; }
http://jsfiddle.net/Lphup/
2: There are a lot of ways to do that, but here's one option:
http://jsfiddle.net/33vth/
for second
<div class="rightCol1">
<img src="pic1.png"><span>your text</span>
<img src="pic2.png"><span>your text</span>
</div>
CSS:
.rightCol1{
float:right;
margin-right:30px;
margin-top:10px;
}
.rightCol1 a {display:inline-block;position:relative;height:200px;width:100px;}
.rightCol1 a span {display:block;width:100px;height:70px;position:absolute;bottom:0;left:0;z-index:99;background:#333}
You can have more positioning control over the elements if you set their parent's positioning to 'relative' and then set their positioning to absolute. This lets you use top, left or right to set an absolute position for the child objects, in relation to their parent.
I didn't have a chance to try this, but something like this should do the trick:
.menuPicHeader { position: relative; }
.menuPicHeader a { position: absolute; top: 0; }
I'm trying to align a button and some text at the bottom of a div much like the example below with the Price and the Check it out button. What's the best way to do this. I've made a div, styled it to get the text, and picture right. I just need to attach the button to the right-hand side and the price to the left, inline with each other.
Similar to the product displays in the website thisiswhyimbroke.com
http://www.thisiswhyimbroke.com/
^^ Price and the Check It Out button. How do I achieve this?
Try like this: DEMO
Try to use reset you CSS first.
CSS:
*{
padding:0;
margin:0;
}
#priceAndButton {
width:100%;
display:block;
height:30px;
line-height:30px;
}
#priceAndButton h4 {
float:left;
vertical-align:middle;
}
#priceAndButton img {
float:right;
}
Hope this helps you
I have created a working fiddle with your requirements:
http://jsfiddle.net/8993H/
HTML:
<div id="main-container">
<div class="img-div"><img src="http://tiwibzone.tiwib.netdna-cdn.com/images/beer-chug-flowmeter1-300x250.jpg"/></div>
<div class="rhs">
<div class="button-nav">
<span class="price">$35.00</span>
<span class="check-btn"><button>Check It Out</button></span>
</div>
</div>
</div>
CSS:
#main-container{
width:100%;
border: 1px solid #aaa;
}
.img-div{
width:50%
}
.img-div img{
width:100%;
}
.rhs{
width:48%;
float:right;
position:relative;
}
.button-nav{
position:absolute;
bottom:10px;
width:100%;
}
.price{
float:left;
}
.check-btn{
float:right;
}
Try this:
button{
float:right
}
#price{
float:left
}
Here i created one working fiddle for your requirement.. You can re use this CSS. Hope This will help you.
HTML
<div class="desc">
<img height="200px" width="200px" src="http://www.clker.com/cliparts/8/2/2/6/11971154711712468971BigRedSmile_A_screwdriver_1.svg.med.png"/>
<p>Move over sliced bread, the water jet pack is officially the greatest thing ever. For only sixty eight grand you can own your very own water thrusting jetpack. It can lift you up to 30 feet high and thrust forward at 30 miles per hour – practically guaranteeing certain death.</p>
<div class="button">
Check it out
</div>
<div class="price">$500.00</div>
</div>
CSS
.desc{
text-align:jstify;
width:50%;
}
.button a{
background-color: #faab37;
color: white;
display: block;
float: right;
padding: 7px 8px;
text-decoration: none;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
}
.button a:hover{
background-color:#f9bd66;
}
Hope This is What your expected output
My code is not working. I found this is because the divs whoch have to change are in an other div... How to bypass the div containing others?
In this example I want the background color change of "partagefb" div when hovering "partage" div
demo: http://jsfiddle.net/u7tYE/1994/
Thanks
html:
<div class="partage" id="partage_70"><img src="/themes/glace_et_ombre/images/partage.png" border="0" width="22" height="21"></div>
<div class="enveloppe_partage">
<div class="partagefb"></div>
</div>
css:
.partage{
position:relative;
float:left;
margin: 2px;
cursor:pointer;
z-index: 100;
width:20px;
height:20px;
}
.partagefb{
position:relative;
width: 25px;
height: 25px;
margin:100px;
background: #ccc;
}
.partage:hover ~ .partagefb{
background-color:#000000;
}
.enveloppe_partage{
position: absolute;
margin: -28px 0 0 115px;
}
The problem is with your selector
use
.partage:hover + .enveloppe_partage .partagefb{
background-color:#000000;
}
Here is the fiddle
Add Id to the div
Make HTML as
<div class="partage" id="partage_70">
<img src="/themes/glace_et_ombre/images/partage.png" border="0" width="22" height="21">
</div>
<div class="enveloppe_partage" id="ank">
<div class="partagefb"></div>
</div>
And CSS could be
#partage_70:hover + .enveloppe_partage #ank {
background-color:#000000;
}
I just wanted to create a newsbox just by using CSS without so many IMG or TABLE crap. It works quite well but there will always appear a space between my image and the colored bar under the picture which should be directly under the picture not with some space between. Here is my code :
<div id="mainbody">
<div class="news_box">
<div class="news_box_inside">
<img src="img/newsbox1.jpg" width="270" height="140" border="0" />
<div class="news_box_bar"></div>
</div>
</div>
</div>
#mainbody {
margin: 0 auto;
width: 900px;
padding-top:30px;
padding-bottom:30px;
}
.news_box {
float:left;
width:288px;
height:348px;
background-color:#DDDDDD;
margin-right:5px;
margin-left:5px;
border:1px;
border-style:solid;
border-color:#BBBBBB;
}
.news_box_inside {
float:left;
margin:9px;
width:270px;
height:330px;
background-color:#FCFCFC;
}
.news_box_bar {
background-color:#540000;
height:43px;
border:1px solid #892d2d;
}
I tried to set the margin and padding to zero for the image or trying position: or top: but somehow I can't get rid of the space. Anyone got a good solution ?
Best regards,
Kris
Add this to your CSS:
.news_box_inside > img {
display: block;
}
Example: http://jsfiddle.net/grc4/TV4zT/
Kris,
If you inspect <img> element by default it's css property display is set to inline-block, SO I suggest to apply style on <img> element and make it display:block
<img src="img/newsbox1.jpg" width="270" height="140" border="0" style="display:block" />
DEMO
Just add a margin to your newsbar as showm: DEMO
.news_box_bar {
background-color:#540000;
height:43px;
border:1px solid #892d2d;
margin-top:-5px;
}
.news_box_bar {
background-color:#540000;
margin-top:-5px;
height:43px;
border:1px solid #892d2d;
}
set this in your CSS class
use link below to see working solution for your problem
http://jsfiddle.net/v7NwR/
<div id="mainbody">
<div class="news_box">
<div class="news_box_inside">
<figure><img src="http://static.adzerk.net/Advertisers/a04d6b3e25c747f48ef794d13e765425.jpg" border="0" /></figure>
<div class="news_box_bar">sdfgsdfgsdfg</div>
</div>
</div>
</div>
css
.news_box{ float:left; border:5px #444 solid;}
figure{ font-size:0%;}
#mainbody{ color:#000;}
.news_box_bar{ background:red;}
I have an image of a map, and I want to add the address to the right hand side of it, I can't seem how to figure it out. Can any one help, this is the part of the coding I'm using:
<div id="main">
<span style="margin-top:5px;
margin-left:5px;
text-align:right;">
<h1 align="center" style="font-size:40px;"><span style="color:red;">Contact</span><span style="color:#FFFFFF;"> Us</span></h1>
<img id="map" src="images/map.png" title="Image of Map for Krazie Needles." align="centre" />
<p align="left" style="margin-left:5px;
margin-top: 5px;">
45 Station Road
with the css code
#main
{
margin-top:42px;
margin-left:auto;
margin-right:auto;
position:relative;
background:rgba(16,16,17,0.70);
height:85%;
width:90%;
box-shadow: 3px 3px 2.5px #888888;
border-radius:5px;
}
img#map
{
margin-left:5px;
border-radius:5px;
border-style:solid;
border-width:2px;
border-color:#FFFFFF;
}
I want to align the < p > tag next to the image.
I have tried to maintain your styling but have removed all inline styles.
#main
{
margin: 42px auto;
position:relative;
background:rgba(16,16,17,0.70);
width:90%;
box-shadow: 3px 3px 2.5px #888888;
border-radius:5px;
}
h1 {
text-align: center;
color: #fff;
font-size: 2em;
}
.red {
color: red;
}
.map
{
display:inline;
margin: 0 5px 0;
border-radius:5px;
border-style:solid;
border-width:2px;
border-color:#fff;
}
.address {
display:inline;
vertical-align: top;
}
<div id="main">
<h1><span class=red>Contact</span> Us</h1>
<img class=map src="http://lorempixel.com/200/200" title="Image of Map for Krazie Needles." />
<p class=address>45 Station Road</p>
</div>
You can use float: left; on the image tag (see float at W3.org), or place the image inside the <p>.
In the img tag, change the (incorrect) align="centre" to align="left".
(Note, there is no center attribute on img tag.)
You should add float:left to image css. If you want to put the address on Map you have to add position:absolute to paragraph with address css.