I am trying to add an image together with some text and want both of them in the same background.
Meaning that I have a container where I put both the image and the text. And want to be able to steer the text however i want to. This might seem easy but I can not make it work, and would like to find out if anyone else knows how to get this job done.
Here comes the html and css i have put together, feel free to change it.
div.imagecaption{float: left;
width: 302px;
margin: 0 1em 1em 1em;
display: inline;
padding:
background: #036;
color: #fff;
}
div.imagecaption img{float: left;
margin-left: 1em;
border: 1px solid #fff;}
<div class="imagecaption">
<img src>
</div>
<p>
TEXTTEXTTEXTTEXTTEXTTEXT</br>
TEXTTEXTTEXTTEXTTEXTTEXT</br>
TEXTTEXTTEXTTEXTTEXTTEXT</br>
</p>
I also want the textual part to have a background-color of its own.
Now i have really tried making this work, and this is my latest attempt.
So, does anyone know what i am doing wrong?
Try this, Its a part of code which I use in my work
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.mybutton a
{
display:block;
line-height:60%;
text-decoration:none;
border:0px solid;
font:Verdana, Geneva, sans-serif;
font-weight:bold;
font-size:12px;
float:left;
background-color:#f5f5f5;
cursor:pointer;
color:#000;
border:1px solid #dedede;
border-top:1px solid #eee;
border-left:1px solid #eee;
}
.mybutton a img
{
width:45px;
height:45px;
margin:5px 0px 5px 0 ;
padding:0px 15px 0px 15px;
border:none;
}
.mybutton a span
{
position:relative;
bottom:3px;
margin:5px 0px 0px 0px;
padding-left:10px;
}
.mybutton a.myimg{
color:#000;
}
.mybutton a.myimg:hover
{
background-color:#E6EFC2;
border:1px solid #C6D880;
color:#529214;
}
.mybutton a.myimg:active{
background-color:#529214;
border:1px solid #529214;
color:#fff;
}
</style>
</head>
<body>
<div class="mybutton">
<a href="#" class="myimg">
<img src="card.jpg" alt="" align="top"/><br/>
<span style="padding-left:10px;" >My Button</span>
</a>
</div>
</body>
</html>
i don't know what you want exactly, try this :
<style>
div.imagecaption{
float: left;
width: 302px;
margin: 0 1em 1em 1em;
display:block;
padding:2px;
background: #036;
color: #fff;
}
div.imagecaption img{
float: left;
border: 1px solid #fff;
}
div.imagecaption p {
float: right;
margin-right: 8px;
width: 180px;
word-wrap: break-word;
}
</style>
<div class="imagecaption">
<img src="images/logo_ws2011.png">
<p>
TEXTTEXTTEXTTEXTTEXTTEXT</br>
TEXTTEXTTEXTTEXTTEXTTEXT</br>
TEXTTEXTTEXTTEXTTEXTTEXT</br>
</p>
</div>
Related
Scenario
I've got the following code:
html body{
font-family:Arial,Verdana,Geneva;
background-color:white;
}
.title{
background-color:red;
color:white;
position:fixed;
top:0;
left:0;
width:100%;
line-height:30px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
box-shadow: 0px 4px 4px 0px grey;
}
<!DOCTYPE html>
<html>
<head>
<title> Material design!</title>
</head>
<body>
<div class="container">
<div class="title"><img src='http://stubborn.altervista.org/options.png'> Material design!</div>
</div>
</body>
</html>
What the code should do
Displaying a fixed header with the title "Material Design!" and an icon
What isn't working
Text and icon are not aligned
My question
How can I solve this problem?
As you can see if you add a yellow outline to the image, they are aligned. The bottom of the image sits on the same line as the text.
html body{
font-family:Arial,Verdana,Geneva;
background-color:white;
}
.title{
background-color:red;
color:white;
position:fixed;
top:0;
left:0;
width:100%;
line-height:30px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
box-shadow: 0px 4px 4px 0px grey;
}
img { outline: solid yellow 1px; }
<!DOCTYPE html>
<html>
<head>
<title> Material design!</title>
</head>
<body>
<div class="container">
<div class="title"><img src='http://stubborn.altervista.org/options.png'> Material design!</div>
</div>
</body>
</html>
You can adjust that with vertical-align:
html body{
font-family:Arial,Verdana,Geneva;
background-color:white;
}
.title{
background-color:red;
color:white;
position:fixed;
top:0;
left:0;
width:100%;
line-height:30px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
box-shadow: 0px 4px 4px 0px grey;
}
img { outline: solid yellow 1px; vertical-align: top; }
<!DOCTYPE html>
<html>
<head>
<title> Material design!</title>
</head>
<body>
<div class="container">
<div class="title"><img src='http://stubborn.altervista.org/options.png'> Material design!</div>
</div>
</body>
</html>
… but ultimately you'll probably want to edit the image to adjust the amount of whitespace it has in it.
Try
.title img{
vertical-align: middle;
}
You just need to vertically align the icon:
html body{
font-family:Arial,Verdana,Geneva;
background-color:white;
}
.title{
background-color:red;
color:white;
position:fixed;
top:0;
left:0;
width:100%;
line-height:30px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
box-shadow: 0px 4px 4px 0px grey;
}
.title img {
vertical-align: middle;
}
<!DOCTYPE html>
<html>
<head>
<title> Material design!</title>
</head>
<body>
<div class="container">
<div class="title"><img src='http://stubborn.altervista.org/options.png'> Material design!</div>
</div>
</body>
</html>
you can use this code
html body{
font-family:Arial,Verdana,Geneva;
background-color:white;
}
.title{
background-color:red;
color:white;
position:fixed;
top:0;
left:0;
width:100%;
line-height:30px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
box-shadow: 0px 4px 4px 0px grey;
}
span{
background-image: url("http://stubborn.altervista.org/options.png");
background-repeat: no-repeat;
background-position: center left;
padding-left: 30px;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<title> Material design!</title>
</head>
<body>
<div class="container">
<div class="title"><span> Material design!</span></div>
</div>
</body>
</html>
or you can float left image an change padding left.
or you can vertical-align: middle for image
good luck
I cannot modify the list which I mark by a comment in the code, and also cannot change background color of the id topicmenu which is supposed to be used to manipulate the list. Can anybody tell what is wrong with my code?
<!doctype html>
<html>
<head>
<title>BBC News - HIEP</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body{
margin:0;
font-family: Arial;
}
.fixwidth{
width: 1020px;
margin: 0 auto;
padding:0;
}
.break{
clear: both;
}
#container{
}
#topbar{
background-color:#7A0000;
width:100%;
height:40px;
color: white;
margin:0;
padding:0;
}
#logodiv{
margin:0;
float:left;
border-right: 1px solid #990000;
padding: 0 160px 0 0;
}
#logodiv img{
position: relative;
top:3px;
margin:0;
padding:0 10px 1px 0;
border-right: 1px solid #990000;
}
#topmenudiv ul{
margin:0;
padding:0;
}
#topmenudiv li{
float: left;
padding:10px 11px 13px 11px;
margin:0;
list-style: none;
border-right: 1px solid #990000;
font-weight:bold;
font-size:0.8em;
}
#searchdiv{
float: left;
padding:7px 11px 5px 11px;
}
#searchdiv input{
height: 18px;
width: 185px;
padding-left: 5px;
font-weight:bold;
color:#525252;
font-size:0.8em;
background-image:url("image/magnify.jpg");
background-repeat: no-repeat;
background-position: right center;
}
#headerbar{
margin:0;
padding:0;
background-color:#990000;
width:100%;
height:130px;
color: white;
}
#headerbar p{
margin:0;
}
#newsheader{
float:left;
font-size: 3em;
padding: 10px 0 0 0;
}
#us{
font-size:0.5em;
}
#rss{
margin: 35px 10px 0 0;
float:right;
font-size:0.9em;
font-weight:bold;
}
#rss img{
height:16px;
{
#topicmenu{ /* the class that is used to manipulate the list*/
}
#topicmenu ul{
background-color:#3E0C0D;
}
#topicmenu li{
list-style: none;
}
</style>
</head>
<body>
<div id ="container">
<div id = "topbar">
<div class ="fixwidth">
<div id="logodiv">
<a href="http://www.bbc.com/news/" target = _blank><img src="image/bbclogo.jpg" /></a>
</div>
<div id= "topmenudiv">
<ul>
<li>News</li>
<li>Sport</li>
<li>Weather</li>
<li>Earth</li>
<li>Future</li>
<li>Shop</li>
<li>TV</li>
<li>Radio</li>
<li>More...</li>
</ul>
</div>
<div id="searchdiv">
<input type = "text" placeholder ="Search"/>
</div>
</div>
</div>
<div class ="break"></div>
<div id="headerbar">
<div class ="fixwidth">
<p id ="newsheader" >NEWS <span id="us">US</span></p>
<div id = "rss">
RSS <img src = "image/rss.jpg" />
</div>
<div class ="break"></div>
<div id ="topicmenu"> <!-- the list I get trouble from-->
<ul>
<li>Home</li>
<li>World</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Hmm maybe because:
#rss img{
height:16px;
{
^ should be }
your question is a bit confusing, you cant change the background-color of the class "topicmenu" because there is no class "topicmenu" in your html. But there is an id topicmenu...
Also the main reason why you cant style it properly because you did not have any closing tag in your #rss img {... , you should have ther #rss img {....}
here's a working fiddle for your problem
<http://jsfiddle.net/owjwm8uw/>
Another thing, try making your code as clean as possible... avoid having space between your id/class and the equal sign, something like:
yourid ="blabla", it should be yourid="blabla"
cheers mate,
Advance Merry Christmas!
I'm attempting to insert a vertical line into my code that runs along a certain path of text.
My full code thus far is:
<!DOCTYPE HTML>
<html>
<header>
<title> This Website </title>
<link type="text/css" href="stylesheet.css" rel="stylesheet"/>
</header>
<body>
<div>
<section>
<h1> Test</h1>
</section>
<img src="thingvellir.jpg "class="vinstri" height="300" />
<p>
<div class="vert">**Random text that I want my vertical line to follow.**</div>
</p>
<img src="logo-thing.png" class="haegri" height="100" />
</div>
</body>
</html>
And this is my CSS file:
body {
background-color:green;
}
div{
height:800px;
width: 1300px;
border-color:black;
background-color:#e9b96e;
border-width:2px;
border-style: solid;
border-radius:10px;
margin: auto;
text-align: center;
}
h1 {
margin:auto;
font-size: 35px;
}
section
{
width: 400px;
height: 20px;
padding: 20px;
border: none;
margin: auto;
box-shadow:10px 10px 5px #888888;
background-color: white;
border-radius: 30px;
position:relative;
top: 10px;
}
p {
font-family:Verdana;
font-size:14px;
}
.vinstri {
float:left;
margin:3px;
border:solid black;
}
.vert {
border-left: thick solid #ff0000;
}
Now it's this last attribute that should make the vertical line, but what it does instead of trailing the text, is that it makes a vertical line along the WHOLE ORIGINAL div box (and for some reason adds black border around as well as pushing the text down) as displayed here.
Any ideas on how to fix this one? Thanks.
Your DIV rule applies to every DIV, both the one immediately inside BODY and your DIV.vert. So, the first DIV rule in your CSS, applying the full black border, applies to every DIV in your code. I'm assuming you only want this to apply to the top DIV instead, rather than to everything.
So give that top DIV it's own class, and update that first rule to use the class name.
This way, your DIV.vert box, where you want the red left line won't also pick up the additional CSS rules.
Updated HTML:
<!DOCTYPE HTML>
<html>
<header>
<title> This Website </title>
<link type="text/css" href="stylesheet.css" rel="stylesheet"/>
</header>
<body>
<div class="main">
<section>
<h1> Test</h1>
</section>
<div class="vert">
<img src="thingvellir.jpg "class="vinstri" height="300" />
</div>
<p>
<div class="vert">**Random text that I want my vertical line to follow.**</div>
</p>
<img src="logo-thing.png" class="haegri" height="100" />
</div>
</body>
</html>
And your CSS:
body {
background-color:green;
}
div.main{
height:800px;
width: 1300px;
border-color:black;
background-color:#e9b96e;
border-width:2px;
border-style: solid;
border-radius:10px;
margin: auto;
text-align: center;
}
h1 {
margin:auto;
font-size: 35px;
}
section
{
width: 400px;
height: 20px;
padding: 20px;
border: none;
margin: auto;
box-shadow:10px 10px 5px #888888;
background-color: white;
border-radius: 30px;
position:relative;
top: 10px;
}
p {
font-family:Verdana;
font-size:14px;
}
.vinstri {
float:left;
margin:3px;
border:solid black;
}
.vert {
border-left: thick solid #ff0000;
}
i keep getting unwanted top margin and cant remove it, i tried everything, this is affected one of my other projects as well, could find any solution. please help
heres my html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Joy The Designert</title>
<link href="style1.css" rel="stylesheet" type="text/css" />
</head>
<body topmargin=0 marginheight=0>
<div id="Wrapper">
<div id="topBanner"><div class="container"><h2>top banner content</h2></div></div>
<div id="nav"><div class="container">Navigation Text<?include ("navigation.php");?></div></div>
<div id="featured"><div class="container"></div></div>
<div id="info"><div class="container">test</div></div>
<div id="support"><div class="container">test</div></div>
<div id="footer"><div class="container">testing footer<?include ("footer.php");?></div></div>
</div>
</body>
</html>
and heres my css content:
#charset "utf-8";
/* CSS Document */
html {
margin:!important 0px;
padding:0px;
}
body {
margin-top:!important 0px;
margin-left:0px;
margin-right:0px;
margin-botton:0px;
padding:0px;
border:none;
color: #292929;
font-family: Arial,Helvetica,sans-serif;
font-size: 81.25%;
}
#wrapper {
margin:0px;
Width:1000px;
height:auto;
}
.container {
width:900px;
margin:auto;
}
#topBanner{
background-image:url(images/scr_gray-bkgd.png);
background-repeat:repeat-x;
height:44px;
width:100%;
}
#nav{
height:72px;
width:100%;
padding
color:#666666;
background-color: #F5F5F5;
border-bottom: 1px solid #FFFFFF;
box-shadow: 0 -5px 5px #5A595D;
color: #666666;
font-weight: bold;
height: 72px;
}
#featured {
min-height:420px;
width:100%;
background: url(none) no-repeat scroll center top #ECECEC;
border-bottom: 1px solid #FFFFFF;
}
#info{
background: url(images/gradient-bg.png);
background-repeat:repeat-x;
height: 256px;
width: 100%;
}
#support{
background-color: #F5F5F5;
border-top: 1px solid #FFFFFF;
box-shadow: 0 5px 5px #5A595D;
height:55px;
width:100%;
}
#footer{
width:100%;
height:150px;
background-image:url(images/scr_gray-bkgd.png);
background-repeat:repeat;
}
#topBanner h2{
margin:0px;
}
This should solve it ;)
very new to code and all this, i am trying to make a simple page with html and css for class. Basically the problem is there is a space between the picture div and the menu div, you can see if you check out my code, also if there is anything that i really don't need, it would be really helpful to point it out. Also i am making this in Chrome. Cheers :)
PS. I am only showing one page of the html so the links wont work.
Here the link to jsFiddle.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cristiano Ronaldo</title>
<link rel="stylesheet" type="text/css" href="../realstyle.css" />
</head>
<body>
<div id="contentwrap">
<div id="languagebar">
<ul id="languagelist">
<li id="Ronaldo">CRISTIANO RONALDO</li>
<li>Português</li>
<li>English</li>
</ul>
</div> <!--languagebar-->
<div id="bigpic">
<a href="http://www.realmadrid.com/cs/Satellite/en/Home.htm">
<img id="Madrid" border="0" src="../GalleryI/Madrid.jpg" width="100" height="100px" />
</a>
<a href="http://www.manutd.com/Splash-Page.aspx">
<img id="United" border="0" src="../GalleryI/United.jpg" width="120" height="100px" />
</a>
</div> <!--bigpic-->
<div id="menubar">
<ul id="menubarlist">
<li>Home</li>
<li>Early Life</li>
<li>Clubs</li>
<li>Records/medals</li>
<li>Personal Life</li>
</ul>
</div> <!--menubar-->
<div id="content">
</div> <!--Content-->
</div> <!--contentwrap-->
</body>
</html>
CSS
body {
background-image: url("GalleryI/Background.jpg");
width:100%;
margin:0;
padding:0;
}
A:hover {text-decoration: none; color:#CD2626;}
a:link {color: White; text-decoration: none;}
a:visited {color: White; text-decoration: none;}
#contentwrap {
text-align:center;
white-space: nowrap;
width: 50%;
margin-left: auto;
margin-right: auto;
background-color: red;
}
#languagebar {
width:800px;
height:30px;
background-image: url("GalleryI/languagebaricon.jpg");
background-repeat: no-repeat;
border-left: #FFF 1px solid;
border-right: #FFF 1px solid;
margin:0 auto;
}
#languagelist li {
display:inline;
list-style:none;
position: relative;
line-height:25px;
padding: 2px 10px 0px 10px;
color:#CD2626;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
float: right;
}
#languagelist li a:hover{
color:#CD2626;
}
#bigpic {
width:800px;
height:100px;
background: #fff;
background-image: url("GalleryI/Jersey1.jpg");
background-repeat: no-repeat;
background-position: 190px -155px;
border-left: #FFF 1px solid;
border-right: #FFF 1px solid;
margin:0 auto;
}
#menubar {
width:800px;
height:40px;
background-image: url("GalleryI/menuicon.jpg");
background-repeat: no-repeat;
padding:0;
white-space: nowrap;
list-style:none;
font-family: Impact, Arial, sans-serif;
text-transform:uppercase !important;
font-size: 16px;
margin:0 auto;
border-left: #FFF 1px solid;
border-right: #FFF 1px solid;
}
#Madrid {
float: left;
}
#United {
float: left;
}
#content {
width: 800px;
height: 726px;
background-color: #FFF;
color: white;
font-size: 18px;
text-align:center;
font-family: arial,sans-serif;
color: white;
margin:0 auto;
border-left: #FFF 1px solid;
border-right: #FFF 1px solid;
}
li#Ronaldo {
line-height:25px;
padding: 2px 25px 2px 25px;
font-family: Arial, Helvetica, sans-serif;
font-size: 22px;
color: white;
float: left;
font-weight: bold;
}
ul#menubarlist li {
display:inline;
position: relative;
letter-spacing:2px;
line-height:35px;
padding: 0px 25px 0px 25px;
color:#CD2626;
}
ul#menubarlist li a:hover{
color:#CD2626;
}
ul#list-nav li a {
text-decoration:none;
color:#ffffff;
}
Just remove this:
#languagebar{
border-left:1px solid #FFFFFF;
}
There is a white space because you have a border!
Edit:
If you mean the gap between the images, see http://jsfiddle.net/GZ8ZT/5/
Just add
#bigpic{font-size:0}
And if you want to add text inside bicpic, you will also need
#bicpic>*{font-size:16px} /* Or your default font-size value */
Remove this
border-left:1px solid #FFFFFF;
from *css #languagebar *