http://i.stack.imgur.com/XZI9d.png
It the above image, I'm trying to get the text to nestle to the left of the menu bar and underneath the header. I've tried both margin and padding, but haven't had any luck. The buttons are all within a separate tag from the text. Code is below.
<!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>Untitled Document</title>
<style>
body
{
background-image: url(Background.gif);
repeat: no-repeat;
background-repeat: no-repeat;
}
div.button
{
width: 220px;
padding:0px, 0px, 0px, 30px;
border:0px;
margin:0px;
}
div.textbox
{
border: 0 px;
margin-top: 300 px;
margin-left: 300 px;
background-color: white;
opactiy: 0.5;
width: 600 px;
}
span
{
width: 600 px;
padding: 90 px, 0 px, 0 px, 250px;
font-family: "Letter Gothic Std Bold";
font-size: 16 pt;
color: #99CCFF;
top: 300px;
left: 300px;
}
</style>
</head>
<body>
<div class = "textbox"><span>
text text text
</span></div>
<div class = "button">
<br>
<br>
<br>
<br>
<img src="DarkLayout_03.gif" width="166" height="66" />
<br>
<br>
<br>
<img src="DarkLayout_06.gif" width="166" height="66" />
<br>
<br>
<br>
<img src="DarkLayout_08.gif" width="166" height="66" />
<br>
<br>
<br>
<a href = "http://notafilmnoirheroine.tumblr.com"><img src="DarkLayout_11.gif" width="166" height="66" />
<br>
<br>
<br>
<img src="DarkLayout_13.gif" width="166" height="66" />
</div>
</body>
</html>
Try using the float left then clear after that.
try something like this
fiddle: http://jsfiddle.net/pWurk/
u have to use float: left
i hope it will help u
Related
I want to generate a PDF from an specified view respecting my actual CSS.
<html>
<head>
<meta charset="utf-8" />
<style>
.justify {
text-align: justify;
text-rendering: geometricPrecision;
}
.center {
text-align: center;
}
body {
font-size: 15px;
white-space: normal;
line-height: 110%;
text-rendering: geometricPrecision;
}
.rightheader {
font-size: 12px;
}
.bigger{
font-size:18px;
}
</style>
<link href="~/Content/uikit.css" rel="stylesheet" />
<link href="~/Content/CartaSates.css" rel="stylesheet" />
<title>
</title>
</head>
<body style="padding:10px;">
<div class="uk-grid" style="margin-top:10px;margin-left:0px !important;">
<div class="uk-width-2-3" style="padding-left:0px;padding-top:0px;">
<img src="~/src/img/logo.png" style="width:200px" />
</div>
<div class="uk-width-1-3 justify" style="padding-left:0px;padding-top:0px;">
<div class="uk-grid">
<div class="uk-width-1-4 justify rightheader" style="padding-left:0px;padding-top:0px;text-align:right">
<strong>Section:</strong><br />
<strong>Office:</strong><br />
<strong>Case:</strong>
</div>
<div class="uk-width-3-4 justify rightheader" style="padding-left:15px;padding-top:0px;">
<span><strong>Foreign Trade Directorate</strong></span><br />
<span><strong>SATES-DCE-UV-2887/2019</strong></span><br />
<span>Request for verification of request.</span>
</div>
</div>
</div>
</div>
</body>
</html>
I already have the my HTML with CSS and it´s showed as intended, logo to the left, and text separated in two minnor divs to the right, but when the PDF is generated, it separate my divs in diferent rows.
I am new to HTML , CSS and I want to add two vertical lines on the both sides (left and right) of the html page.
A bit of help would be very much appreciated...Thanks very much indeed
Edit: the code has now been added
<!doctype html>
<html lang="en">
<head>
<style>
#button1{
width: 300px;
height: 40px;
}
#button2{
width: 300px;
height: 40px;
}
#link1{
font-size: 33px;}
#pic1 {
position:fixed;
left:30%;
top:30%;
margin-left:-382px /*half the width*/
margin-top:-370px /*half the height*/
}
</style>
<meta charset="utf-8">
<meta name="Homepage" content="Starting page for the survey website ">
<title> Survey HomePage</title>
</head>
<body>
<img src="kingstonunilogo.jpg" alt="uni logo" style="width:180px;height:160px">
<button type="button home-button" id="button1" >Home</button>
<button type="button contact-button" id="button2">Contact Us</button>
LogIn
<img src="homepagepic.jpg" alt="homepagepic" id="pic1" style="width:400px;height:350px">
</body>
</html>
You can try creating a div container in your body and setting the borders, something along these lines:
<body style="width:100%">
//you can set the div-width to 100% too, I'm setting it to 95% so you can see it.//
<div style="width:95%;border-left:1px solid #000;border-right:1px solid #000;">
Page contents go here
</div>
</body>
Preview: http://jsfiddle.net/pbj4xxh0/
I am a beginner to HTML and CSS. i have some knowledge of javascript, not jquery and also responsive design.
So I want to make a 3 column grid aligned to center and each with 33.33% width. Also a little space between each horizontally and some space on either side. but i can seem to align it to the center.
here is my html. I also want it to be Responsive. It should be reduced to two columns then to one and stuff like that. How could i achieve this?
Here is 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>
<link rel="stylesheet" href="Home.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div class="layout" align="center">
<div class="success"> </div>
<div class="success"> </div>
<div class="success"> </div>
<div class="success"> </div>
<div class="success"> </div>
<div class="success"> </div>
<div class="success"> </div>
</div>
</body>
</html>
CSS
#charset "utf-8";
/* CSS Document */
.success {
display:inline-block;
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin-top: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center
}
.success li:last-child {
float: none;
width: auto;
}
.layout {
width:75%;
}
You need to start again.
Basically your html structure needs to reflect your 3 column layout. Usually this is achieved with <div> tags.
so something like:
<div id="content">
<div id="contentleft">
your first column content is here
</div>
<div id="contentcenter">
the stuff for the middle goes here
</div>
<div id="contentright">
etc. etc. etc.<br>
...
</div>
</div>
then your .css can do something along the following lines:
#content {
width: 900px;
}
#contentLeft {
width:33%;
float:left;
}
#contentcenter {
width:33%;
padding:1%;
float:left;
}
#contentright {
width: 33%;
float:right;
}
Hi well I basically want to move down my logo div which is inside my topBar div however when ever I use padding or margin it moves the whole top bar down or the logo just repeats its self (and yes I have tried background-repeat: no-repeat)
<!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>Untitled Document</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
</head>
<body lang="en">
<div class="alert">Do you want advertsing space? Contact us: <b>advertising#chattrd.com</b></div>
<div class="topBar">
<div id="logo">
<p>chattrd</p>
</div>
</div>
</body>
</html>
body {
background: #F7F7F7;
font-family:Tahoma, Geneva, sans-serif;
margin: 0;
padding: 0;
}
.alert {
font-size: 10px;
color: #FFF;
background: #1f1f1f;
height: 14px;
padding-left: 10px;
font-family: Arial;
}
.topBar {
background: #0C3;
height: 40px;
}
#logo {
background-image:url(../images/logo.png);
height: 26px;
width: 121px;
overflow: hidden;
display: block;
text-indent:-999px;
}
The reason it is behaving this way is that you are using the image as a background. If you want to carry on with this approach, the easiest way to be able to move it vertically is to place another div before the #logo-div like so:
<body lang="en">
<div class="alert">Do you want advertsing space? Contact us: <b>advertising#chattrd.com</b></div>
<div class="topBar">
<div id="spaceDiv"></div>
<div id="logo"></div>
</div>
</body>
The height of the spaceDiv can be used to move the #logo-div using the following CSS:
#spaceDiv{
height:6px;
}
Hey guys I want my two #previews to float side by side. I have tried adding float:left but it doesn't work. At the moment they are just sitting on top of each other. All my code is below, thank you for any help.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Juicy Designs</title>
<meta name="description" content="Juicy Designs">
<meta name="author" content="Juicy Designs">
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
body {
background: #F4F4F4;
font-family: 'Lobster', cursive;
}
#logo {
background: url(logo.png);
width: 300px;
height: 75px;
margin: 70px 200px;
}
#container {
width: 1300px;
}
h2 {
text-align: center;
font-size: 29px;
color: #444;
}
p {
text-align: center;
font-size: 22px;
color: #444;
}
.line {
background: url(line.png);
width: 972px;
height: 1px;
margin: 0 auto;
}
#previews {
border: 5px solid #FFF;
width: 300px;
margin: 50px 200px;
}
</style>
</head>
<body>
<div id="logo"></div>
<div id="container">
<div class="line"></div>
<h2>Simple, clean & modern designs</h2>
<p>We create simple, clean and modern designs!</p>
<div class="line"></div>
<div id="previews"><img src="preview.jpg" /></div>
<div id="previews"><img src="preview.jpg" /></div>
</div>
</body>
</html>
Float them both to the left and it will work. You'll also need to clear them then.
A few things:
a) DIVs are block-level. You would need to define them as display:inline; for float to work.
b) You should be using class instead of ID. An ID is supposed to appear once on a page only. Classes can appear as many times as you wish.
That's all:
<div id="previews">
<img src="preview.jpg" style="float:left;" />
<img src="preview.jpg" style="float:left;" />
</div>
You can also use this:
#previews img {
float:left;
}
<div id="previews">
<img src="preview.jpg" />
<img src="preview.jpg" />
</div>
<html lang="en"><head>
<meta charset="utf-8">
<title>Juicy Designs</title>
<meta name="description" content="Juicy Designs">
<meta name="author" content="Juicy Designs">
<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>body {background: #F4F4F4;font-family: 'Lobster', cursive;}#logo {background: url(logo.png);width: 300px;height: 75px;margin: 70px 200px;}#container {width: 1300px;}h2 {text-align: center;font-size: 29px;color: #444;}p {text-align: center;font-size: 22px;color: #444;}.line {background: url(line.png);width: 972px;height: 1px;margin: 0 auto;}#previews {border: 5px solid #FFF;width: 300px;display:inline-block; vertical-align:top; margin:50px 100px;}</style>
</head>
<body>
<div id="logo"></div>
<div id="container">
<div class="line"></div>
<h2>Simple, clean & modern designs</h2>
<p>We create simple, clean and modern designs!</p>
<div class="line"></div>
<div id="previews"><img src="preview.jpg"></div>
<div id="previews"><img src="preview.jpg"></div>
</div>
</body></html>
You simply add display:inline-block; vertical-align:top; under the CSS for #previews. You will also need to reduce the amount of horizontal margin used for #previews because the width of the container is only 1300px.