I've been trying to write a code for this for some time but with no success.
What I want to accomplish:
This part isn't hard to do static, but responsive concept gives me nuts.
How should look on small screens:
How it looks now:
Like you see, When I start to resize my window it all start good , but then, in one point the right line go to a new line.
Fiddle:
I made an example of this on Fiddle : http://jsfiddle.net/Gbcfs/8/
CODE:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.line{width:41%; background-color: #a6a6a6; height:1px; display:inline; margin:17px 2px 2px; float:left; min-width:2px;}
h2 {float:left;}
</style>
</head>
<body>
<div class="line"></div>
<h2>How it works</h2>
<div class="line"></div>
</body>
</html>
I would do this with a border.
Try this:
<h2><span>Heading 2</span></h2>
body {
background-color:#fff;
}
h2 {
border-bottom:solid 1 px black;
text-align:center;
}
h2 span {
background-color:#fff;
padding-bottom:3px;
margin-bottom:-3px;
display:inline-block;
}
http://jsbin.com/aguxoz/1/edit
you can use this code ........... i think this is very helpful..
<div><div class="line"></div>
<h2 style="padding-top:8px">How it works</h2>
<div class="line"></div></div>
.line{width:41%; background-color: #a6a6a6; height:1px; display:inline; margin:17px 2px 0 2px; float:left; min-width:2px;}
h2 {float:left;}
I assume your problem have dependancy on font-size too,
try with the following CSS
<style>
.line{width:30%; background: #a6a6a6 0 50% repeat-x; display:inline; margin:2px 2px 2px; float:left; }
h2 {float:left;}
.autowidth
{
width:auto;
}
</style>
along with the follwoing mark-up
<div class="autowidth">
<div class="line"></div>
<h2>How it works</h2>
<div class="line"></div>
<div>
This can help to an extent.
Related
My layout currently breaks on 320px resolution (.info drops below .icon and breaks the layout) and I'm lost as to how about preventing it from breaking.
The .num info(number) is being loaded dynamically, and could be anything from 0 - 2147483647. If the screen resolution is not wide enough to show the .num and the .unread on one line, instead of breaking, I would like the .unread to drop down to the next line (display:block applied to it?). I tried to think of a way to use only css, then though I could use js to apply class if more than 2 digits are present, but this direction still doesn't seem right if the resolution is wider and could show more digits. E.G - 1000px could show many more digits... I would want it to stay on one line in this case.
My code is below:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<style>
body{
padding:20px;
}
.wrapper {
background-color:#cccccc;
border-radius:20px;
overflow:hidden;
border:2px solid black;
}
.icon {
font-size:40px;
padding:12px;
display:block;
}
.icon, .info {
float:left;
}
.info {
border-left:1px solid black;
padding-left: 15px;
}
.info h3 {
font-size:16px;
margin:10px 0 0;
}
.info p {
margin:10px 0;
}
.num {
font-weight:bold;
font-size:20px;
}
.unread {
white-space: nowrap;
}
</style>
</head>
<body>
<div class="wrapper">
<div>
<div class="icon">X</div>
<div class="info">
<h3>Header Information</h3>
<p>
<a class="num">23</a>
<span class="unread">Unchecked Voicemails to Date</span>
</p>
</div>
</div>
</div>
</body>
</html>
http://plnkr.co/edit/18Mids4M3SupNwOT8ocP?p=preview
I figured it out. I needed to add a width to the .info container and make the elements inside of .info p display:inline-block.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<style>
body{
padding:20px;
}
.wrapper {
background-color:#cccccc;
border-radius:20px;
overflow:hidden;
border:2px solid black;
}
.icon {
font-size:40px;
padding:12px;
}
.icon, .info {
float:left;
}
.info {
border-left:1px solid black;
padding-left:15px;
width:60%;
}
.info h3 {
font-size:16px;
margin:10px 0 0;
}
.info p {
margin:5px 0 15px;
}
.info span {
display:inline-block;
}
.num {
font-weight:bold;
font-size:20px;
}
</style>
</head>
<body>
<div class="wrapper">
<div>
<div class="icon">X</div>
<div class="info">
<h3>Header Information</h3>
<p>
<a class="num">2</a>
<span class="unread">Unopened Voicemails</span>
</p>
</div>
</div>
</div>
</body>
</html>
http://plnkr.co/edit/NanIRaMcK9AJvpNEQG3Z?p=preview
I am unable to remove default top margin after many attempts. Below is my html and css code. Please suggest where I am lacking?
HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Sample</title>
</head>
<body>
<div id="maincontainer">
<div id="header">
<h1>Sample</h1>
</div>
</div>
<div id="contents">
Body of page
</div>
</body>
</html>
CSS File
html, body
{
margin:0 auto;
padding:0;
border:0;
background:#fff;
font-family:Times New Roman;
font-size: 16px;
width:1024px;
}
#maincontainer
{
margin:0;
padding:5px;
}
#header
{
margin:0;
padding:0;
height:100px;
background:#8A0808;
text-align:left;
}
h1
{
margin:0;
padding:0 0 0 10px;
font-size: 60px;
font-weight:normal;
color:#fff;
}
padding: 5px; on the #maincontainer might be your issue. There's going to be 5px of white surrounding anything inside of the #maincontainer div.
I am learning CSS by my onw, and already spent some hours on this, without solution...
I need to put a text over a image, but there is two images in the same line (inline-block). Please, see my code (example):
<html>
<head>
<title>Test</title>
<style type="text/css">
.payrow { display:inline-block; width:100%; margin-bottom:14px; text-align:center; }
.paybtn { display:inline-block; margin:0 10px 0 10px; text-align:center; }
.paybtn img { width:250px; height:120px; margin:3px; border:0; filter:alpha(opacity=80); opacity:.80; }
.paybtn a:hover img { filter:alpha(opacity=100); opacity:1; }
.vtotal { font:bold 20px Arial, Helvetica, sans-serif; color:#7A7A7A; }
</style>
</head>
<body>
<div class="payrow">
<div class="paybtn">
<img src="paybtn1.gif" alt="PayPal1">
<div class="vtotal">Total: U$ 510.00</div>
</div>
<div class="paybtn">
<img src="paybtn2.gif" alt="PayPal2">
<div class="vtotal">Total: U$ 580.00</div>
</div>
</div>
</body>
</html>
This is the result of my code:
And this is what I really want:
Please, can someone give me an idea of what to do?
Thanks!
You could use negative margins
.vtotal {
font:bold 20px Arial, Helvetica, sans-serif;
color:#7A7A7A;
position:relative;
margin-top:-40px; /*adjust the pixels accordingly*/
}
Demo at http://jsfiddle.net/gaby/5fxRf/
I have some text and <span> tag, which are inside a <div>.
<span> is float: right; I need the text to be on the left side and <span> on right side.
In every browser it displays perfectly except ie7. How can I fix this bug?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title> Testing page</title>
</head>
<body>
<div style="border:2px solid #000; display:inline;">
welcome<span style="float:right"> demo</span>
</div>
</body>
</html>
move span before text, this should help.
Make span as block element and move it.
I.e.
span{
display: block;
float: right;
}
Would it be possible to enclose the text in a <p> and have that display: inline?
User the following css it will work. DEMO LINK
*{
padding:0;
margin:0;
}
body {
font:normal 12px/18px Arial, Helvetica, sans-serif;
color:#000;
padding:20px;
}
.container {
border:2px solid #000;
padding:20px;
overflow:hidden;
height:100%;
}
.container span {
display:inline-block;
*float:left;
}
I have to modify a website that another developer wrote.
I need the font and size from one class, but I need the formatting from another.
html:
<div class="box1">
<div class="box2">
<p class="p1">
The text I need printed
</p>
</div>
</div>
css:
.box1
{
float:left;
width:500px;
padding:10px 0px 10px 15px;
}
.box1 p.p1
{
font-size:15px;
color:#ff00ff;
line-height:22px;
}
...
.box2
{
padding:10px;
}
.box2 p.p1
{
font-size:12px;
color:#ff0000;
line-height:22px;
}
How do I use p1 from box1 while keeping the alignment the same? I would rather not define a new .box2 p.p2 unless that is the only way.
Thanks.
From the examples you posted, I don't think you need multiple classes here (as others are suggesting). Do you realize what is going on? Your paragraph is being applied both paragraph rules you have defined, .box1 p.p1 and .box2 p.p1. Since the latter overwrites all properties from the former, those are the styles you see.
I think all you need to do is remove the second rule (.box2 p.p1) entirely.
Try this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.box1
{
float:left;
width:500px;
padding:10px 0px 10px 15px;
}
.box1 .box2 p.p1
{
font-size:15px;
color:#ff00ff;
line-height:22px;
}
.box2
{
padding:10px;
}
.box2 p.p1
{
font-size:12px;
color:#ff0000;
line-height:22px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<p class="p1">The text I need printed</p>
</div>
</div>
</body>
</html>
Here's a demo - http://jsfiddle.net/fedev/ZwrfV/
UPDATED
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.box1
{
float:left;
width:500px;
padding:10px 0px 10px 15px;
}
.box1 p.p1, .box1 .box2 p.p1
{
font-size:15px;
color:#ff00ff;
line-height:22px;
}
.box2
{
padding:10px;
}
.box2 p.p1
{
font-size:12px;
color:#ff0000;
line-height:22px;
}
</style>
</head>
<body>
<div class="box1">
<p class="p1">The text I need printed under box 1</p>
<div class="box2">
<p class="p1">The text I need printed under box 2</p>
</div>
</div>
</body>
</html>
Another demo - http://jsfiddle.net/fedev/M9mWN/
I am not entirely clear on what you are trying to accomplish, but the basic answer to your question (about basically needing to combine two classes) is that you can have an element with more than one class, just separate them by spaces
class="class1 class2 ...."