I'm really really new to HTML/CSS, but somehow decided to plunge head on to using 960 Grid System, which I found helpful. I know some says it's unsemantic, but I've been involved and at the end, tangled in the problem stated above. I've tried a few codes like overflow: hidden, overflow: auto, display: block, etc that I found on other pages and pages on stack overflow, but the error still there.
I would really appreciate anyone's help at this site.
These are the html of the site:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content=
"text/html; charset=us-ascii">
<meta http-equiv="content-type" content=
"text/html; charset=us-ascii">
<base>
<title>
najibahabakar.com
</title>
<link rel="stylesheet" href="style.css" type="text/css"
media="screen">
<link rel="stylesheet" href="960.css" type="text/css" media=
"screen">
<link rel="stylesheet" href="text.css" type="text/css" media=
"screen">
</head>
<body>
<div class="container_12">
<div id="topgrafik">
<div class="prefix_6">
<ul id="nav" class="nav">
<li>Laman Depan
</li>
<li>Mengenai
</li>
<li>Mimpi
</li>
<li>Hubungi
</li>
</ul>
</div>
<div class="clear"></div>
<div class="grid_3 prefix_1" id="tgfocus">
<img class="frame" src="images/mengkuang.jpg" alt=
"tikar mengkuang!">
</div>
<div class="clear"></div>
<div class="center">
<div class="grid_4">
<h5>
Buku, Sastera, Diri
</h5>
</div>
<div class="grid_4">
<h5>
Galeri
</h5>
</div>
<div class="grid_4">
<h5>
Web Design
</h5>
</div>
</div>
</div>
<div class="clear"></div>
<div id="middlebody">
<div class="left">
<div class="grid_2 prefix_1">
<p id="date">
31 DISEMBER 2009
</p>
<p>
Buku, kemuncak peradaban
</p>
<hr>
<p id="date">
31 DISEMBER 2009
</p>
<p>
Cemas bila buku bertambah!
</p>
<hr>
<p id="date">
31 DISEMBER 2009
</p>
<p>
Janji tak terpenuh
</p>
</div>
<div class="grid_4 prefix_1">
<p>
Di sini galeri imej, mungkin juga hasil-hasil kerja
Photoshop & Inkscape
</p>
<hr>
</div>
<div class="grid_2 prefix_1">
<p id="date">
31 DISEMBER 2009
</p>
<p>
Hasil pertama
</p>
<hr>
</div>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
And the css:
html {
background: url('images/bground.jpg') repeat;
color: #333333;
}
body,h1,h2,h3,h4,h5,h6 {
padding: 0;
margin: 0;
}
/*----------NAVIGATION--------------------*/
#nav li {
list-style-type: none;
display: inline;
}
ul.nav {
margin-top: 2px;
}
/*----------------GENERAL CLASSES------------*/
.center {
text-align: center;
align: center;
padding-left: 10px;
}
.left {
text-align: left;
font-size: 95%;
padding-left: 15px;
}
#date {
font-size: 85%;
}
/*-----------------BACKGROUND-----------------*/
#topgrafik {
background: url('images/topgrafik.jpg') center top;
height: 426px;
width: 993px;
float: left;
position: relative;
}
#middlebody {
background: url('images/kandungan2.jpg') center bottom repeat-y;
height: 408px;
width: 993px;
float: left;
position: relative;
}
#footer {
background: url('images/footer.jpg') center bottom;
background-repeat: no-repeat;
height: 228px;
width: 993px;
float: left;
position: relative;
}
/*---------------CONTENT LAYOUT---------------------*/
#tgfocus {
margin-top: 80px;
margin-bottom: 40px;
position: relative;
min-height: 205px;
}
/*------------------IMAGES AND THUMBNAIL GALLERY-----------*/
.frame {
padding: 10px;
border: 1px solid #333300;
height: 190px;
width: 150px;
background-color: #eaede0;
position: absolute;
}
.align-right {
float:right;
margin: 0 0 15px 15px;
}
.align-left {
float:left; margin: 0 15px 15px 0;
}
Plus the 960 Grid System CSS (for easy reference):
.container_12,.container_16{margin-left:auto;margin-right:auto;width:960px}.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12,.grid_13,.grid_14,.grid_15,.grid_16{display:inline;float:left;position:relative;margin-left:10px;margin-right:10px}.container_12 .grid_3,.container_16 .grid_4{width:220px}.container_12 .grid_6,.container_16 .grid_8{width:460px}.container_12 .grid_9,.container_16 .grid_12{width:700px}.container_12 .grid_12,.container_16 .grid_16{width:940px}.alpha{margin-left:0}.omega{margin-right:0}.container_12 .grid_1{width:60px}.container_12 .grid_2{width:140px}.container_12 .grid_4{width:300px}.container_12 .grid_5{width:380px}.container_12 .grid_7{width:540px}.container_12 .grid_8{width:620px}.container_12 .grid_10{width:780px}.container_12 .grid_11{width:860px}.container_16 .grid_1{width:40px}.container_16 .grid_2{width:100px}.container_16 .grid_3{width:160px}.container_16 .grid_5{width:280px}.container_16 .grid_6{width:340px}.container_16 .grid_7{width:400px}.container_16 .grid_9{width:520px}.container_16 .grid_10{width:580px}.container_16 .grid_11{width:640px}.container_16 .grid_13{width:760px}.container_16 .grid_14{width:820px}.container_16 .grid_15{width:880px}.container_12 .prefix_3,.container_16 .prefix_4{padding-left:240px}.container_12 .prefix_6,.container_16 .prefix_8{padding-left:480px}.container_12 .prefix_9,.container_16 .prefix_12{padding-left:720px}.container_12 .prefix_1{padding-left:80px}.container_12 .prefix_2{padding-left:160px}.container_12 .prefix_4{padding-left:320px}.container_12 .prefix_5{padding-left:400px}.container_12 .prefix_7{padding-left:560px}.container_12 .prefix_8{padding-left:640px}.container_12 .prefix_10{padding-left:800px}.container_12 .prefix_11{padding-left:880px}.container_16 .prefix_1{padding-left:60px}.container_16 .prefix_2{padding-left:120px}.container_16 .prefix_3{padding-left:180px}.container_16 .prefix_5{padding-left:300px}.container_16 .prefix_6{padding-left:360px}.container_16 .prefix_7{padding-left:420px}.container_16 .prefix_9{padding-left:540px}.container_16 .prefix_10{padding-left:600px}.container_16 .prefix_11{padding-left:660px}.container_16 .prefix_13{padding-left:780px}.container_16 .prefix_14{padding-left:840px}.container_16 .prefix_15{padding-left:900px}.container_12 .suffix_3,.container_16 .suffix_4{padding-right:240px}.container_12 .suffix_6,.container_16 .suffix_8{padding-right:480px}.container_12 .suffix_9,.container_16 .suffix_12{padding-right:720px}.container_12 .suffix_1{padding-right:80px}.container_12 .suffix_2{padding-right:160px}.container_12 .suffix_4{padding-right:320px}.container_12 .suffix_5{padding-right:400px}.container_12 .suffix_7{padding-right:560px}.container_12 .suffix_8{padding-right:640px}.container_12 .suffix_10{padding-right:800px}.container_12 .suffix_11{padding-right:880px}.container_16 .suffix_1{padding-right:60px}.container_16 .suffix_2{padding-right:120px}.container_16 .suffix_3{padding-right:180px}.container_16 .suffix_5{padding-right:300px}.container_16 .suffix_6{padding-right:360px}.container_16 .suffix_7{padding-right:420px}.container_16 .suffix_9{padding-right:540px}.container_16 .suffix_10{padding-right:600px}.container_16 .suffix_11{padding-right:660px}.container_16 .suffix_13{padding-right:780px}.container_16 .suffix_14{padding-right:840px}.container_16 .suffix_15{padding-right:900px}.container_12 .push_3,.container_16 .push_4{left:240px}.container_12 .push_6,.container_16 .push_8{left:480px}.container_12 .push_9,.container_16 .push_12{left:720px}.container_12 .push_1{left:80px}.container_12 .push_2{left:160px}.container_12 .push_4{left:320px}.container_12 .push_5{left:400px}.container_12 .push_7{left:560px}.container_12 .push_8{left:640px}.container_12 .push_10{left:800px}.container_12 .push_11{left:880px}.container_16 .push_1{left:60px}.container_16 .push_2{left:120px}.container_16 .push_3{left:180px}.container_16 .push_5{left:300px}.container_16 .push_6{left:360px}.container_16 .push_7{left:420px}.container_16 .push_9{left:540px}.container_16 .push_10{left:600px}.container_16 .push_11{left:660px}.container_16 .push_13{left:780px}.container_16 .push_14{left:840px}.container_16 .push_15{left:900px}.container_12 .pull_3,.container_16 .pull_4{left:-240px}.container_12 .pull_6,.container_16 .pull_8{left:-480px}.container_12 .pull_9,.container_16 .pull_12{left:-720px}.container_12 .pull_1{left:-80px}.container_12 .pull_2{left:-160px}.container_12 .pull_4{left:-320px}.container_12 .pull_5{left:-400px}.container_12 .pull_7{left:-560px}.container_12 .pull_8{left:-640px}.container_12 .pull_10{left:-800px}.container_12 .pull_11{left:-880px}.container_16 .pull_1{left:-60px}.container_16 .pull_2{left:-120px}.container_16 .pull_3{left:-180px}.container_16 .pull_5{left:-300px}.container_16 .pull_6{left:-360px}.container_16 .pull_7{left:-420px}.container_16 .pull_9{left:-540px}.container_16 .pull_10{left:-600px}.container_16 .pull_11{left:-660px}.container_16 .pull_13{left:-780px}.container_16 .pull_14{left:-840px}.container_16 .pull_15{left:-900px}.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}* html .clearfix,*:first-child+html .clearfix{zoom:1}
All the background images in three divs #topgrafik, #middlebody and #footer disappear in IE.
Please help and thank you in advance.
I think the problem is the last slash in the image paths:
./images/footer.jpg/
I am not sure, but maybe, the dot may cause problems, too. You could describe a relative path just like this
images/footer.jpg
Have you tried removing the trailing slash in the image url?
Like this:
background: url('images/topgrafik.jpg') center top;
Related
So I am trying to make different texts next to specific symbols (in the elevator-pitch div) but somehow the element skip rows and text end up below the images. Ideally I want each text to be nicely aligned next to the images (hence making the float).
Here is the code: https://codepen.io/andreassoteriou/pen/PoaLBjv
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>AndreasSoteriouCV</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Dancing+Script&family=Merriweather&family=Montserrat&family=Pacifico&family=Playball&family=Playfair+Display&display=swap" rel="stylesheet">
</head>
<body>
<div class="top-container">
<img src="andreassoteriou-modified.png" alt="andreas">
<h1>Andreas Soteriou</h1>
<h2>aspiring web developer</h2>
</div>
<h1>My Story</h1>
<div class="elevator-pitch">
<img class="creativity-img" src="https://cdn-icons-png.flaticon.com/512/1126/1126453.png" alt="creativity">
<h2>Creativity</h2>
<p>Why I am creativfdfdfdfdfdfdfdwerv4vrtyvrtyvrtyvyrytve</p>
</div>
<hr>
<div class="elevator-pitch">
<img class="logical-img" src="https://cdn-icons-png.flaticon.com/128/1935/1935467.png" alt="logical">
<h2>Logical</h2>
<p>Why I am creativggggfgotjgirtgfdffdffdfdfdfdfdfd</p>
</div>
<div class="story-container">
</div>
</body>
</html>
body {
margin: 0;
font-family: 'Merriweather', serif;
text-align: center;
}
.top-container {
background-color: #F8EDE3;
margin: 0;
height: 450px;
padding-top: 60px;
}
.top-container > h1 {
margin-top:40px;
font-size: 40px;
}
.top-container > h2 {
font-family: 'Dancing script', serif;
font-size: 30px;
}
.middle-container {
}
.elevator-pitch {
width: 25%;
text-align: left;
line-height: 1.5;
margin: 50px auto 50px auto;
overflow:auto;
}
.creativity-img {
float: left;
margin-right: 20px;
width: 30%;
}
.logical-img {
float: right;
width: 30%;
margin-left: 20px;
any idea on how I should tackle this? Most importantly, very curious as to why this happens!
Best regards,
Andreas
I was expecting the text to be nicely aligned next to the image as in the udemy course I am doing now:
I'd like to have a header and then three images side-by-side.
When in small screens, the images should occupy all the width and be placed vertically one after another.
For each image, when the mouse is over it, some text should be overlayed.
For mobile and touch screens, I don't know how that text could be shown, but would like to have it shown in some way.
Each of the images should point to another html page (not shown in my example.
What I managed to do until now is:
<!DOCTYPE html>
<html>
<head>
<style>
html {
font-family: helvetica, arial, sans-serif;
}
.cabecalho {
width:70%;
height:200px;
text-align:center;
margin:70px;
margin-top:10px;
}
.cabecalho p{
line-height: 10px; /* within paragraph */
margin-bottom: 4px; /* between paragraphs */
}
.corpo {
width:60%;
height:500px;
}
* {
box-sizing: border-box;
}
.img__description_layer {
position: relative;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(204, 204, 204, 0.6);
color: #111;
visibility: hidden;
opacity: 0;
display: flex;
align-items: center;
justify-content: center;
pad: 8px;
height: 300px;
width: 200px;
/* transition effect. not necessary */
transition: opacity .2s, visibility .2s;
}
.img__description {
transition: .2s;
transform: translateY(1em);
}
.img__wrap:hover .img__description {
transform: translateY(0);
}
.img__wrap:hover .img__description_layer {
visibility: visible;
opacity: 1;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width: 500px) {
.column {
width: 100%;
}
}
</style>
</style>
</head>
<body>
<div class="cabecalho">
<header>
</header>
</div>
<main>
<div class="row">
<div class="column">
<div class="img__wrap">
<img class="img__img" alt="alttext" align="middle" src="http://placehold.it/257x200.jpg" width="300" height="200" style="width:100%">
<div class="img__description_layer">
<p class="img__description">Some paragraph</p>
</div>
</div>
</div>
<div class="column">
<div class="img__wrap">
<img class="img__img" alt="alttext" align="middle" src="http://placehold.it/257x200.jpg" width="300" height="200" style="width=100%">
<div class="img__description_layer">
<p class="img__description">Some paragraph</p>
</div>
</div>
</div>
<div class="column">
<div class="img__wrap">
<img class="img__img" alt="alttext" align="middle" src="http://placehold.it/257x200.jpg" width="300" height="200" style="width=100%">
<div class="img__description_layer">
<p class="img__description">Some paragraph</p>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
I'd appreciate some help on this.
I have a problem with my footer, I want to put my image up higher so that the bottom of it will be even with the copy right info. I'm using HTML 5 and CSS 3, that image is below the copy right info, I have tried everything I can think of to make the image float up to where I can think of and now I'm asking you guys for help.
here is my html
<div class="main-footer">
<div class="footer">
<article class="contact-us">
<h2>CONTACT US</h2><br>
<p>Email: <a href="#">
info##</a></p><br>
<p>Personnel Network Incorporated<br>
address <br>
address</p><br>
<p>Phone: </p><br>
<footer class="copyright">
<p>Copyright © 2013 Personnel
Network, Inc. All rights reserved.</p>
</footer>
<img alt="PNI logo" src="Images/pni-logo.jpg">
</article>
</div>
And here is the css
.footer {
color: #729AA9;
width: 70%;
margin: auto;
overflow: hidden;
}
.contact-us {
width: 60%;
float: left;
margin: 2% 3%;
}
.contact-us a {
color: #1C5ACB;
}
.copyright {
background-color: black;
width: 70%;
float: left;
}
.contact-us img {
width: 230px;
height: 80px;
float: left;
}
You can vertically align your copyright and image to the bottom, so that the bottom of the copyright and the bottom of the image line up:
Updated CSS:
.contact-us div {
vertical-align: bottom;
}
.copyright {
background-color: black;
width: 40%;
vertical-align: bottom;
display: inline-block;
}
.contact-us img {
width: 230px;
height: 80px;
vertical-align: bottom;
display: inline-block;
}
Updated HTML:
<div class="footer">
<article class="contact-us">
<h2>CONTACT US</h2><br>
<p>Email: <a href="#">
info##</a></p><br>
<p>Personnel Network Incorporated<br>
address <br>
address</p><br>
<p>Phone: </p><br>
<div class="footer-wrapper-class">
<footer class="copyright">
<p>Copyright © 2013 Personnel
Network, Inc. All rights reserved.</p>
</footer>
<img alt="PNI logo" src="Images/pni-logo.jpg">
</div>
</article>
</div>
This will actually move your copyright down to the same height as the bottom of the image (rather than moving your image up). If this is too low, you can add this CSS:
.footer-wrapper-class {
margin-top: -10px; // Set this to whatever amount you want to move them up
}
JSFiddle: http://jsfiddle.net/JZW7X/
I have seven divs with id 1 to 7 in my html when I resize my window diagonally then the fittextjs plugin resizes the text within the 7 divs thats fine.
When I resize the window horizontally then the font-size decreases/increases fine...
What is not working as expected is: When I resize the window only vertically then the font-size does not decrease/shrink.
How can I make it work for the last non-working case?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>FitText</title>
<style type="text/css">
body, html {
width: 100%;
height: 100%;
font-family: arial;
/*overflow: hidden;*/
}
* { /* Every element which has a border or padding value puts this value inside the div */
box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 0;
margin: 0;
}
._Z {
width: 12.50%;
}
.Stack {
display: table;
height: 100%;
float: left;
}
.Stack li {
list-style: none;
display: table-row;
}
.Stack li div {
display: table-cell;
}
.horizontal-right {
text-align: right;
}
.horizontal-center {
text-align: center;
}
.vertical-center {
vertical-align: middle;
}
#responseView {
height: 100%;
}
</style>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<div id="responseView" data-bind="swipeLeftRightContentViews: $root.showMapView">
<div style="height: 100%;">
<ul class="Stack _Z" data-bind="foreach: replyTimeStack.segments">
<li style="height:14.2%;background: green; color: black;">
<div id="div1" style="border-bottom:white solid 1px;" class="horizontal-center vertical-center">1</div>
</li>
<li style="height:14.2%;background: green; color: black;">
<div id="div2" style="border-bottom:white solid 1px;" class="horizontal-center vertical-center">2</div>
</li>
<li style="height:14.2%;background: green; color: black;">
<div id="div3" style="border-bottom:white solid 1px;" class="horizontal-center vertical-center">3</div>
</li>
<li style="height:14.2%;background: green; color: black;">
<div id="div4" style="border-bottom:white solid 1px;" class="horizontal-center vertical-center">4</div>
</li>
<li style="height:14.2%;background: yellow; color: black;">
<div id="div5" style="border-bottom:white solid 1px;" class="horizontal-center vertical-center">5</div>
</li>
<li style="height:14.2%;background: orange; color: black;">
<div id="div6" style="border-bottom:white solid 1px;" class="horizontal-center vertical-center">6</div>
</li>
<li style="height:14.2%;background: green; color: black;">
<div id="div7" style="border-bottom:white solid 1px;" class="horizontal-center vertical-center">7</div>
</li>
</ul>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>
<script type="text/javascript">
$("#div1").fitText(1.0, { minFontSize: '7px', maxFontSize: '16px' });
$("#div2").fitText(1.0, { minFontSize: '7px', maxFontSize: '16px' });
$("#div3").fitText(1.0, { minFontSize: '7px', maxFontSize: '16px' });
$("#div4").fitText(1.0, { minFontSize: '7px', maxFontSize: '16px' });
$("#div5").fitText(1.0, { minFontSize: '7px', maxFontSize: '16px' });
$("#div6").fitText(1.0, { minFontSize: '7px', maxFontSize: '16px' });
$("#div7").fitText(1.0, { minFontSize: '7px', maxFontSize: '16px' });
</script>
</body>
</html>
In order to make it work like that, you should tweak their resizer function in the script... setting up to measure the font size based on height rather than width.
$this.css('font-size', Math.max(Math.min($this.height() / (compressor*2), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)));
that should make it work based on the height..
Cheers!
I have simple divs
<div class="ui-bar-a ui-corner-top">
first_test | Status: <img src="templates/style/images/reload.gif" />
</div>
<div class="ui-bar-a">
sms1 | Status: <img src="templates/style/images/reload.gif" />
</div>
<div class="ui-bar-a ui-corner-bottom">
sms2 | Status: <img src="templates/style/images/reload.gif" />
</div>
It looks like:
I need it like:
I tried to set margin:auto align="middle", but it did not help
try putting
.ui-bar-a img{
vertical-align: middle;
}
just put
vertical-align:middle;
css for image. nothing else. you will get your output.
You could use this CSS:
.ui-bar-a img, .ui-bar-a span{
display:inline-block;
vertical-align:top;
}
.ui-bar-a img{
margin-top:xxx; // as you requirment
}
and this HTML:
<div class="ui-bar-a">
<span>Some text here </span>
<img src="xxx.jpg">
</div>
use this code, below is the result as well as attached
<div class="ui-bar-a">
sms1 | Status: <img src="status.png" style= "vertical-align:middle;" />
</div>
<div class="ui-bar-a ui-corner-bottom">
sms2 | Status: <img style= "vertical-align:middle;" src="status.png" />
</div>
Here an Example how to vertical align DIV's
Example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Universal vertical center with CSS</title>
<style>
.greenBorder {border: 1px solid green;} /* just borders to see it */
</style>
</head>
<body>
<div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">
<div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
<div class="greenBorder" style=" #position: relative; #top: -50%">
any text<br>
any height<br>
any content, for example generated from DB<br>
everything is vertically centered
</div>
</div>
</div>
</body>
</html>
Source: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
You can use: floting for making ,
<div class="ui-bar-a ui-corner-top">
<span>first_test</span> <span>|</span> <span>Status:<span> <img src="templates/style/images/reload.gif" />
.ui-corner-top{
overflow:hidden
padding:5px 0;
}
.ui-corner-top span{
float:left;
display:block;
padding:0 2px;
}