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.
Related
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>
I would like to ask for help with this task:
I would like to have a non-breaking-space between img and a piece of text. But the problem is, that sometimes the line between image and text breaks up even if the non-breaking-space appears.
Where am I wrong?
Here is the JsFiddle:
https://jsfiddle.net/cj7Lp1vy/9/
HTML
<div id="parent">
<div id="child">
<!-- some content -->
<div class="cl">
<img src="obrazky/plocha.png"> Plocha: 11 m<sup>2</sup>
<img src="obrazky/pocet_pokoju.png"> Pokoje: 2
<img src="obrazky/rekonstrukce.png"> Rekonstrukce: ne
<img src="obrazky/okna.png"> Okna: stará
<img src="obrazky/topeni.png"> Topení: dřevo
<img src="obrazky/typ_stavby.png"> Typ stavby: dřevo
</div>
</div>
</div>
CSS
#parent {
width:235px;
min-height:110px;
border:1px solid #CCCCCC;
padding:15px 10px 10px 10px;
margin:0px 12px 24px 12px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#child {
position:relative;
}
.cl {
clear:both;
}
img {
border:1px solid red;
width:16px;
}
You're going wrong because the Unicode specification for NBSP says that there shouldn't be a line break after the character. it doesn't stop there being one before the character.
To work around this, wrap the <img> and the in a span and give the span the styling white-space:nowrap;
I am making a CSS design for a SIM game I play, and a customer asked for 4 boxes, two large and in between them, two horizontally aligned boxes. They work fine, unless I try and add headers. The entire website is set up in a ridiculous amount of tables, basically coding from the 90s. All boxes I have made are div and aligned to meet up with the existing boxes on the page.
The main boxes are how I want the headers on all four boxes, separate and do not scroll. However, as you can see from this fiddle, nothing is aligning. When I try to put headers on the horizontal boxes, it really messes up the align. I am a fairly new coder, and would greatly appreciate some help.
div {
display: block;
color: #fff;
}
.topcontain{
width:500px;
height:300px;
}
.topleftbox {
width:240px;
height:300px;
overflow:auto;
float:left;
background:#505665;
color:#fff;
text-align:center;
display:block;
font-family: 'Snippet', sans-serif;
font-size: 12px!important;
margin: 5px;
opacity: .75;
}
.toprightbox {
width:240px;
height:300px;
overflow:auto;
float:right;
background:#505665;
color:#fff;
text-align:center;
display:block;
font-family: 'Snippet', sans-serif;
font-size: 12px!important;
margin: 5px;
opacity: .75;
}
.bottomcontain {
width:500px;
height:300px;
}
.header {
width:500px;
float:center;
background:#060e23;
color:#fff;
text-align:center;
display:block;
font-size: 14px;
border: 1px solid #030711;
opacity: 1.0;
}
.bottombox {
width:500px;
height:300px;
overflow:auto;
float:center;
background:#505665;
font-size: 12px;
color:#fff;
text-align:center;
display:block;
font-family: 'Snippet', sans-serif;
opacity: .75;
}
.credit {
width:500px;
float:center;
background:#060e23;
color:#fff;
text-align:center;
display:block;
font-size: 12px;
border: 1px solid #030711;
opacity: .85;
}
.top {
font-family: 'Snippet', sans-serif;
background : #060e23;
color : #fff;
font-size : 15px;
padding : 5px 15px;
font-weight : normal;
text-align : center;
border: 1px solid #030711;
opacity: .90;
}
Here is how it looks on the page I am coding:
example
Thank you again!
http://jsfiddle.net/6bEsE/6/
<div class="bottomcontain">
<div class="header">Lorem ipsum</div>
<div class="bottombox">
[TOP]
</div>
</div>
<div class="topcontain">
<div class="topleftbox">
<div class="top">Lorem ipsum</div>
<div>
[MIDDLE LEFT]
</div>
</div>
<div class="toprightbox">
<div class="top">Lorem ipsum</div>
<div>
[MIDDLE RIGHT]
</div>
</div>
</div>
<div class="bottomcontain">
<div class="header">Lorem ipsum</div>
<div class="bottombox">
[BOTTOM]
</div>
</div>
<div class="credit">Layout and CSS by Echo [#15480]</div>
I did a fast clean of your code (5 minutes)
But it is far from finishing it
First of all, you have bad closing of divs.
Second, you have fixed height for divs. A div with fixed width and height and more text than can fit in it will create scrolls.
before inserting all that text, try to fix the containers starting from the simple example i provided above. Also you may need to change a bit the html structure, to group those floating middle divs.
Demo Fiddle
In CSS
.clear{
clear:both;
}
In HTML
<div class="clear"> </div>
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