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/
Related
<html>
<style>
body { background-color:#F1EEF2; }
header {
width:800px;
margin-left:auto;
margin-right:auto;
}
layout {
min-width: 100%;
min-height: 100%;
}
nav.header {
width:800px;
height:40px;
background-color:#000000;
color:#fef8f0;
}
nav.footer {
width:800px;
height:30px;
color:#fef8f0;
}
footer {
width:800px;
height:80px;
background:url(images/footer_beans.png) no-repeat #000000;
margin-left:auto;
margin-right:auto;
}
span {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
color:#c29a5f;
}
p.s1 {
font-family: sans-serif;
font-size:15px;
color:#ffffff;
margin:0px;
padding:10px 24px 0;
}
p.s2 {
font-family: sans-serif;
font-size:15px;
color:#000000;
margin:0px;
padding:12px 10px 15px 12px;
}
ul.header {
width:500px;
margin:0;
padding:0;
padding-top:13px;
float:right;
list-style-type:none;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
}
ul.footer {
width:500px;
float:right;
list-style-type:none;
margin: 0;
padding:0;
padding-top:47px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}
li {
float:left;
font-size:11px;
font-weight:bold;
margin:0;
}
a {
padding:8px;
color:#fef8f0;
text-decoration:none;
}
section {
width:800px;
margin:0 auto;
}
article {
width:800px;
height:600px;
}
#left, #right {
background: #000000;
position: fixed;
}
#left, #right {
top: 0; bottom: 0;
width: 10px;
}
#left { left: 265; }
#right { right: 265; }
#hm_topleft {width:434px; height:300px; float:left;}
#hm_topright {width:366px; height:300px; float:left; background:#570401; margin=0; overflow=hidden;}
#hm_content {width:800px; height:300px; margin:auto; float:left; background-color:#000000;}
#hm_contentbox {width:760px; height:130px; margin:25px; background:#F1EEF2; border:3px solid #000000;}
</style>
<div id="layout">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta charset=iso-8859-1>
<title>MAJID JORDAN - Home</title>
</head>
<body>
<header>
<nav class="header";>
<ul class="header">
<li>Home|</li>
<li>Members|</li>
<li>Albums|</li>
<li>Gigs & Tours|</li>
<li>Gallery</li>
</ul>
</nav>
</header>
<section style="width:800px; margin:0 auto;">
<article style=" width:800px; height:600px; ">
<img src="C:\Users\jorda_000.JORDAN-PC\Pictures\Website\logo.jpg" width="200" height="170" alt="MAJID JORDAN"/>
<div
style="
padding: 10px;
top: 10;
right: 480;
position: absolute;
z-index: 1;
visibility: show;
font-size:35px;">
<h1><center><font face="verdana"><strong>MAJID JORDAN</font></center</strong><h1>
</div>
<div id="hm_contentbox">
<p class="s2">Majid Jordan is a Canadian R&B duo, composed of singer Majid Al Maskati and producer Jordan Ullman. They are signed to OVO Sound, the record label co-founded by rapper Drake, producer Noah "40" Shebib and Oliver El-Khatib.
Jordan, originally from Toronto, and Majid, arriving in Toronto by way of Bahrain, met as students at the University of Toronto in 2011. Working between Ullman's dorm room and his parents' basement, they launched their first joint EP titled Afterhours on SoundCloud under their previous name Good People.</p>
</div>
<div
style="
position: absolute;
top: 390px;
right: 285px;
border: 3px solid black;">
<img src="C:\Users\jorda_000.JORDAN-PC\Pictures\Website\home.jpg" width="400" height="300" alt="MAJID JORDAN"/>
</div>
<button style="margin:auto;border-radius:10px;border:1px solid black;color:solid black;height:60px;width:300px;font-size:24px;position:absolute;top:400;left:300;"><strong>
Members
</button></strong>
<button style="margin:auto;border-radius:10px;border:1px solid black;color:solid black;height:60px;width:300px;font-size:24px;position:absolute;top:480;left:300;"><strong>
Albums & Songs
</button></strong>
<button style="margin:auto;border-radius:10px;border:1px solid black;color:solid black;height:60px;width:300px;font-size:24px;position:absolute;top:560;left:300;"><strong>
Gigs & Tours
</button></strong>
<button style="border-radius:10px;border:1px solid black;color:solid black;height:60px;width:300px;font-size:24px;position:absolute;top:640;left:300;"><strong>
Gallery
</button></strong>
<footer style="position:absolute;top:710;>
<nav class="footer">
<ul class="footer">
<li class="hf1"><a>Members </a>|</li>
<li class="hf1"><a>Albums & Songs </a>|</li>
<li class="hf1"><a>Gigs & Tours </a>|</li>
<li class="hf1"><a>Gallery</a></li>
</ul>
</nav>
</footer>
<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>
</div>
</body>
</html>
I'm an extreme beginner when it comes to html, and I'm creating a small website on a band of my choice and it looks perfectly fine on the computer I used to create the website, but on another computer with a different resolution, the whole layout is messed up and objects are overlapping etc.
Any help would be greatly appreciated as like I said, I'm very new wit this language, if you need any more information I'll try and assist you.
You could of course Code your own solution, but this would be like reinventing the wheel and for beginners its really difficult. The most common solution is to use a CSS and/or JS Framework, like bootstrap or angularmaterial. This will not only give you the tools to make your site responsive with little to no effort it also has some cool design opportunities. You also don't need to worry about being restricted since you can "overwrite" some things in the framework with your own css Code.
For some Education you can look here:
http://getbootstrap.com/ ->Get Bootstrap (it's free)
http://v4-alpha.getbootstrap.com/layout/responsive-utilities/ -> some explanation to get a grasp on what you can do
http://www.w3schools.com/bootstrap/default.asp -> a well written beginner friendly tutorial for bootstrap
If you are not convinced yet check this out:
http://www.w3schools.com/bootstrap/bootstrap_theme_band.asp
If you need some further advice or some more detail on specific questions, just contact me.
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'm trying to make a horizontal nav bar on my website and I want to use CSS to position it closely under my websites name header and a portion of the background of the nav bar behind the icon to the left. Here is my code
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Oldnut.com</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
var currPic=1;
var totPics=2;
var keepTime;
function setupPicChange()
{keepTime=setTimeout("changePic()", 5000);}
function changePic()
{currPic++; if(currPic>totPic)currPic=1;
document.getElementByld("image").src="image"+currPic+".jpg";
setupPicChange();}
</script>
</head>
<body onLoad="setupPicChange();">
<div id="wrapper">
<div id="content">
<div id="banner">
<div id="img"><img src="images/Walnut.png" class="nut-image"></div>
<div id="top">Oldnut.com</div>
</div>
Home
Preassmbled
CPU
GPU
<div>
<img id="image" src="images/image1.jpg" alt="picture">
</div>
<div id="deals">
</div>
</div>
<div id="foot"
</div>
</div>
</body>
</html>
Not much to see here I guess it's obvious what I am doing, and my CSS
#charset "UTF-8";
body{background-image:url(../images/bg_bodytakeover.png);
}
#wrapper{
margin-left:auto;
margin-right:auto;
width:1000px;
}
.nut-image {
z-index: 1000;
position: relative;
}
#content{
margin-left:10px;
margin-right:10px;
padding-bottom:20px;
box-shadow:0px 0px 20px 3px;
border-radius:4px;
background-color:#FFFFFF;
height:600px;
position: relative;
}
#banner{
margin:auto;
position: relative;
}
#img{
float:left;
}
#top{
float: left;
color: #FF6600;
text-align: left;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-style: normal;
font-weight: bold;
font-size: 75pt;
text-shadow: 2px 2px #FFFFFF;
text-transform: uppercase;
}
nav {
position: absolute;
width: 100%;
background: #FF6600;
top: 110px;
}
#list-nav{
list-style-type:none;
margin:0;
padding:0;
width:calc(100% - 192px);
float:right;
top: 125px;
}
#list-nav li{
float:left;
width: 25%;
padding: 0;
margin: 0;
}
#list-nav li a{
text-decoration:none;
width:100%;
background:#FF6600;
color:#eee;
float:left;
text-align:center;
display:block;
}
#list-nav li a:hover{
background:#1d8ed0;
color:#000;
}
Now I want to have my nav bar very closely under the giant header text and the orange line background to go under the icon to the end of the white content border. I've tried all sorts of padding and margin mixing but its really just making a mess. I have looked around extensively but nothing seems to be working for me what works for others. Or I can't get all of what I'm looking to do. Anyone got any tips?
EDIT:I've tried a lot of padding to get the nav bar to stretch the screen but it keeps breaking the even separation of the buttons and their hover effects, is there another way to sort them evenly?
*SECOND EDIT NEW QUESTION*
I am trying to have my images change back and forth between the two after 5 seconds. I have seen code from other sites and don't see why it isn't working. Anyone notice what is wrong?
Update for comment:
I've updated the fiddle here to have exactly what you want. If you can't use calc on the list items and since you have a set width of 1000px, you can hardcode the widths in by doing this: width: (1000px - 192px) / 2, which would be width: 202px
Original answer:
If you will always have 4 menu items, set width: 25% (100% / 4) on each #list-nav li. Here's an updated fiddle
I also set the margin and padding on the li elements to 0.
Is this what you are looking for?
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.