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
Related
I have a div that has a image that will stretch with the browser. I have a div that's a logo when the wrapper div(image) is shrunk the div should stay centered but its off to one side . I used left:42%; to center. It its fine when big just when u shrink it goes off to one side..
Do I have any other options besides left:42%;? margin: 0 auto; did not work...
#font-face {
font-family: myFirstFont;
src: url(jewler/Allura-Regular.otf);
}
body {
b111ackground-color: #000000;
}
h1 {
color: maroon;
margin-left: 40px;
}
h2 {
color: maroon;
margin-left: 40px;
}
h3 {
color: maroon;
margin-left: 40px;
}
#wrapper{
width:80%;
height:80%;
margin: 0 auto;
;
}
* {
margin: 0;
padding: 0;
}
#logo{
margin: 0 auto;
border: px solid green;
color:#FFF;
position:absolute;
margin-left:10px;
margin-top:10px;
display:table;
width:21%;
max-width:250px;
height:122px;
top:0%;
left:42%;
}
#info{
margin: 0 auto;
border: 1px solid green;
color:#FFF;
display:table;
width:250px;
height:250px;
border: 1px solid red;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> | Coming Soon!</title>
</head>
<body>
<div id="wrapper">
<IMG SRC="jewler/BackGround.png" width="100%" height="100%"/>
<div id="logo">
<IMG SRC="jewler/logo.png" width="100%" height="100%"/>
</div>
<div id="info">
Coming Soon
Adress:
Phone:
E-mail:
</div>
</div>
</body>
</html>
Use left: 50% with transform: translateX(-50%) to center an absolutely positioned element horizontally. Also remove the left margin so it's truly centered.
#font-face {
font-family: myFirstFont;
src: url(jewler/Allura-Regular.otf);
}
body {
b111ackground-color: #000000;
}
h1 {
color: maroon;
margin-left: 40px;
}
h2 {
color: maroon;
margin-left: 40px;
}
h3 {
color: maroon;
margin-left: 40px;
}
#wrapper{
width:80%;
height:80%;
margin: 0 auto;
;
}
* {
margin: 0;
padding: 0;
}
#logo{
margin: 0 auto;
border: px solid green;
color:#FFF;
position:absolute;
/* margin-left:10px; */
margin-top:10px;
display:table;
width:21%;
max-width:250px;
height:122px;
top:0%;
left:50%;
transform: translateX(-50%);
}
#info{
margin: 0 auto;
border: 1px solid green;
color:#FFF;
display:table;
width:250px;
height:250px;
border: 1px solid red;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> | Coming Soon!</title>
</head>
<body>
<div id="wrapper">
<IMG SRC="jewler/BackGround.png" width="100%" height="100%"/>
<div id="logo">
<IMG SRC="jewler/logo.png" width="100%" height="100%"/>
</div>
<div id="info">
Coming Soon
Adress:
Phone:
E-mail:
</div>
</div>
</body>
</html>
I want to display the button and label on the same line.But multiple buttons on different lines. How can I do that .Help will be appreciated.
Button and label should be side by side and next set of button and label on next line.
Where am I going wrong ?
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
.round-button
{
width:20px;
}
.round-button-circle {
width: 100%;
height:0;
padding-bottom: 100%;
border-radius: 50%;
overflow:hidden;
background: #4679BD;
box-shadow: 0 0 3px gray;
}
.round-button-circle:hover {
background:#30588e;
}
.round-button a {
width:100%;
padding-top:50%;
padding-bottom:50%;
line-height:1em;
margin-top:-0.5em;
text-align:center;
color:#e2eaf3;
font-family:Verdana;
font-size:1.2em;
font-weight:bold;
text-decoration:none;
}
</style>
</head>
<body>
<br><span ><div class='round-button'><div class='round-button-circle'></div></div> <label style='display:inline;'>edit</label></span>
<br><span ><div class='round-button'><div class='round-button-circle'></div></div> <label style='display:inline;'>edit</label></span>
</body>
</html>
Use display:table-cell will give you expected output.
<span>
<div class='round-button'><div class='round-button-circle'></div></div>
<label class="lblname" >edit</label>
</span>
<span >
<div class='round-button'><div class='round-button-circle'></div></div>
<label class="lblname">edit</label>
</span>
CSS:
.round-button
{
width:20px;
display: table-cell;
}
.lblname{
display: table-cell;
padding: 0 5px;
vertical-align: middle;
}
Working Fiddle
Note: Try to avoid giving inline css.
As there are some structural changes required in your html code so instead of tweaking little in your code you should consider restructuring it in proper manner. you can try following code.
.button {
background: #4679BD;
border-radius: 50%;
float: left;
width: 20px;
height: 20px;
margin-right: 10px;
}
.wrapper {
float: left;
width: 100%;
margin-bottom: 10px;
}
a {
float: left;
}
<div class="wrapper">
<a class="button"></a><span>Button 1</span>
</div>
<div class="wrapper">
<a class="button"></a><span>Button 2</span>
</div>
You can try floating:
.round-button {
width: 20px;
float: left;
clear: left;
}
just remove <br> in bitween both <span>
and add below to css
span {
display:inline-block;
}
Like i.e.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" />
<style>
span {
display:inline-block;
}
.new_line {
width:780px;
margin:0 auto;
height:50px;
}
.new_line ul li {
list-style-type:none;
float:left;
padding:10px 22px ;
}
.new_line ul li img {
float:left;}
</style>
</head>
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
.round-button
{
width:20px;
}
.round-button-circle {
width: 100%;
height:0;
padding-bottom: 100%;
border-radius: 50%;
overflow:hidden;
background: #4679BD;
box-shadow: 0 0 3px gray;
}
.round-button-circle:hover {
background:#30588e;
}
.round-button a {
width:100%;
padding-top:50%;
padding-bottom:50%;
line-height:1em;
margin-top:-0.5em;
text-align:center;
color:#e2eaf3;
font-family:Verdana;
font-size:1.2em;
font-weight:bold;
text-decoration:none;
}
</style>
</head>
<body>
<br><span ><div class='round-button'><div class='round-button-circle'></div></div> <label style='display:inline;'>edit</label></span>
<span ><div class='round-button'><div class='round-button-circle'></div></div> <label style='display:inline;'>edit</label></span>
</body>
</html>
First you can't wrap a div(Block element) with a span(inline element) - Invalid HTML
And the problem is you aren't making button div round-button(Block element) inline or inline-block or float would also work.
As the label is inline element you don't need to display it to inline. Rather you need to change the button div to act as inline.
<div class="wrap">
<div class='round-button' style="display:inline-block">
<div class='round-button-circle'></div>
</div>
<label style='display:inline;'>edit</label>
</div> <!--/ END OF WRAP -->
I styled the round-button div with inline-block because it would display inline as well maintaining block element css properties.
Check this
hope helps
Snippet
.round-button
{
width:60px;
}
.round-button-circle {
background: #4679bd none repeat scroll 0 0;
border-radius: 50%;
box-shadow: 0 0 3px gray;
height: 20px;
overflow: hidden;
width: 20px;
}
.round-button-circle:hover {
background:#30588e;
}
.round-button a {
width:100%;
padding-top:50%;
padding-bottom:50%;
line-height:1em;
margin-top:-0.5em;
text-align:center;
color:#e2eaf3;
font-family:Verdana;
font-size:1.2em;
font-weight:bold;
text-decoration:none;
}
<span >
<div class='round-button'>
<label style="float: left; margin-right: 10px;">edit</label>
<div class='round-button-circle'></div>
</div>
</span>
<span >
<div class='round-button'>
<label style="float: left; margin-right: 10px;">edit</label>
<div class='round-button-circle'></div>
</div>
</span>
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 ;)
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>