I've got a website that has a big image covering the screen. In its image there are several DIVs (Text, Forms, Images) (see picture 2). The big image container is made displaying always the center of the image regardless of window size, so when you make your windows smaller, the very center stays visible.
The problem now is that the DIVs are collapsing, when I scale down the window size (see picture 3).
Picture number 2 depicts what it is intended to be look like!
#div1 {
width:25%;
left: 32%;
top:7.5%;
position: relative;
float:left;
}
#div2 {
position:relative;
left:37.5%;
clear:both;
width:14%;
height:20%;
}
#div2 h2 {
width:10%;
left:15%;
margin-top:11%;
position: relative;
float: left;
}
#div3 {
left: 64.4%;
top:-2.5%;
width:111px;
position: relative;
}
#div4{
left: 93%;
top:-18.0%;
width:111px;
position: relative;
}
And HTML:
<body>
<div id="wrapper"\>
<div id="div1">
<h1>Seite nicht gefunden!</h1>
</div>
<h2>Bug melden</h2>
<div id="div2">
<form>
<label>Titel</label>
<input type="text" id="form_title" name="title" placeholder="Ich will einen Bug melden!" required>
<label>URL</label>
<input type="url" id="form_url" name="URL" placeholder="###" >
<label>Beschreibung</label>
<textarea type="text" id="form_whathappened" name="happened" placeholder="Was ist passiert?" required></textarea>
<input type="submit" value="Absenden" />
</form>
</div>
<div id="div3">
<img src="logo.png" alt="Logo" />
</div>
<div id="div4">
<p>Jetzt<br/ >Tester<br />werden!<br /></p>
</div>
</div>
</body>
Can you please help me what I'm doing wrong? Thank you very much in advance!
Christoph
This is probably way far from perfect, but it's worth trying.
The html code:
<head>
<meta charset="utf-8">
<title>404</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<div id="error">
<h1>Seite nicht gefunden!</h1>
</div>
<form id="form">
<h2>Bug melden</h2>
<label>Titel</label>
<input type="text" id="form_title" name="title" placeholder="Ich will einen Bug melden!" required>
<label>URL</label>
<input type="url" id="form_url" name="URL" placeholder="http://www.###/???" >
<label>Beschreibung</label>
<textarea type="text" id="form_whathappened" name="happened" placeholder="Was ist passiert?" required></textarea>
<input type="submit" value="Absenden" />
</form>
... //other code goes here</div>
and this is the edited section of the css code:
#wrapper { width: 640px; height: auto; margin: 0 auto; }
#error { font-size: 120%; margin: 65px 0 0 60px; float:left; }
#error h1 { font-size: 150%; text-align:center; }
#form { margin: 15px 86px; width:260px; height: 40%; float: left; background: green; }
Check the working example here: example
Hope that helps as a start.
Related
Hi Guys I am using a table: cell-spacing layout for my website and I need some help. I have a two column website, one being the sidebar and the other containing the content. However, if I add any margins within one of the table-cell divs it moves the side bar spacing with it. I need the spacing on these two cells to be different, and I am not sure how to do so.
My code is as follows:
The CSS:
content {
width : 100%;
display : table;
margin : 0 auto;
height : 100%;
}
#side_bar, #main {
display : table-cell;
}
#side_bar {
border: 1px solid #111;
width: 13%;
background: linear-gradient(#444, #111);
}
#main {
width: 65%;
}
#contact_box {
margin-left: 30%;
margin-top: 7%;
background-color: #111;
opacity: 0.3;
width: 500px;
height: 500px;
}
The HTML:
<div id="content">
<div id="main">
<div id="contact_box">
<form method="post" id="contact_form" action="contact.php">
<p>Full Name:</p> <input type="text" size="40" id="fullname" name="fullname"><br/>
<p>Email Address:</p> <input type="text" size="40" id="email" name="email"><br/>
<p>Type of Inquiry:</p> <input type="text" size="40" id="question" name="question"><br/>
<p>Message:</p> <textarea rows="20" cols="45"></textarea><br/>
<input type="submit" style="float:right; text-transform: uppercase;" value="Send">
</form>
</div>
</div>
<div id="side_bar">
<div id="divider"><h1>News Blurb</h1></div>
<div id="news"><?php //print_news(); ?></div>
<div id="divider"><h1>Featured Games</h1></div>
<div id="featured"><?php //echo $games ?></div>
</div>
</div>
Thank you for any and all help.
Try:
#side_bar {
vertical-align:top;
}
I am trying to create a shopping list. The list is dynamically created using Javascript (jQueryUI). I want the thrash cans next to be on the right side (where this blue dots that I draw are). I tried to do it using left or style="right:350px" and float:right in tag but it didn't work.
Here is my code where it's row is generated:
var row=$('<div class"productsclass" id='+selectedproducts[i]+' style="width:400px">
<label style="font-size:20px">'+selectedproducts[i]+'</label><input type="text"
name="Quantity" value="1" id='+thesi+'><img class=delete
src="http://b.dryicons.com/images/icon_sets/handy_part_2_icons/png/128x128/recycle_bin.png"
height="22" width="22" style="right:350px"></div>');
rowID++;
$("#productstable").append(row);
Here is the html:
<div id="maindiv" class="maindiv">
<input id="autocomplete_text_field">
<button id="add_product_button">Add product</button>
<form action="#" id="productstable" name="productstable">
<p></p>
</form>
</div>
</body>
and here is the CSS:
#body{
background-color: #6E0D25
}
#maindiv {
position:absolute;
top: 50%;
left: 50%;
width:30em;
height:18em;
margin-top: -9em; /*set to a negative number 1/2 of your height*/
margin-left: -15em; /*set to a negative number 1/2 of your width*/
/*border: 1px solid #ccc;*/
background-color: #6E0D25;
}
#productstable
{
background-color:#F1EBE4;
border-radius:10px;
width:400px;
}
#product
{
width:380px;
}
#autocomplete_text_field
{
width:200px;
height:40px;
border-radius:10px;
}
#add_product_button
{
width:200px;
height:50px;
border-radius:10px;
}
How can I do it?
(Sorry if it is a very useless question, It's almost the first time I use CSS)
Solved after user2313440's answer:
Change img class=delete to img class="delete" then add float:right; to it in CSS.
just a simple rearrange of your img, and using float: right;
try this code instead:
var row=$(' <div class "productsclass" id='+selectedproducts[i]+' style="width:400px">
<img class=deletesrc="http://b.dryicons.com/images/icon_sets/handy_part_2_icons/png/128x128/recycle_bin.png" height="22" width="22" style="float: right;">
<label style="font-size:20px">'+selectedproducts[i]+'</label>
<input type="text" name="Quantity" value="1" id='+thesi+'>
</div>');
rowID++;
$("#productstable").append(row);
I want to center the div box im making here but i dont want to center the text in the box and i cant seem to find how to do this. For now what i have is this:
.box {
text-align: left;
background-color:#3F48CC;
color:white;
font-weight:bold;
margin:120px auto;
height:150px;
display: inline-block;
width: 200px;
}
and
<div class=box>
Login
<form method ="post" action="addMember.php">
<label for="name">Username:</label>
<input name="name"/>
<label for="password">Password:</label>
<input name="password"/>
<p>
<input name="submit" type="Submit" value="Register"/>
<input name="reset" type="reset" value="Clear Form">
</form>
</div>
Thanks in advance!
Remove display: inline-block; & text-align:center
inline-block is not necessary when you are defining the width/height for the div.
By default div is a block element.
.box {
background-color:#3F48CC;
color:white;
font-weight:bold;
margin:120px auto;
height:150px;
width: 200px;
}
DEMO
Use dead centre...
.box {
text-align: left;
background-color:#3F48CC;
color:white;
font-weight:bold;
height:150px;
width: 200px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -75px;
}
Note: Negative margins are exactly half the height and width, which pull the element back into perfect center. Only works with elements of a fixed height/width.
More info:
CSS Tricks Example
jsFiddle Demo
jsFiddle DEMO
Alternate jsFiddle DEMO with Centered Form and also this CSS3 Version.
The key to making the form look correct is to use padding, which is part of box model. Doing so allows you to fill in the sides, and keeps the text left-hand aligned.
HTML
<div class=box>Login
<form method="post" action="addMember.php">
<label for="name">Username:</label>
<input name="name" />
<label for="password">Password:</label>
<input name="password" />
<div class="buttons">
<input name="submit" type="Submit" value="Register" />
<input name="reset" type="reset" value="Clear Form" />
</div>
</form>
</div>
CSS:
.box {
background-color:#3F48CC;
color:white;
font-weight:bold;
height:150px;
width: 150px;
padding: 10px;
}
.buttons{
padding-top: 20px;
}
Screenshot:
IE 7 and 9 are displaying #logon on the right hand side of #wrapper.
Live page is here: http://lalabs.hiv411.org/logout.php
CSS:
#wrapper {
position:absolute;
width:960px;
min-height:680px;
background:url(../g/bg.jpg) no-repeat #6CB8D2;
top:0;
left: 50%;
margin-left: -480px;
}
#logon {
position:relative;
background:url(../g/login_bg.png) no-repeat;
width:656px;
height:484px;
margin: 135px auto;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
#logonInner {
text-align:center;
padding: 66px 0 0 0;
font-size:14px;
}
HTML is dead simple...
<div id="wrapper">
<div id="logon">
<div id="logonInner">
<img src="g/welcome.gif" alt="Welcome to the Louisiana Office of Public Health Survey of Laboratories and Facilities" name="welcome" width="397" height="110" id="welcome" />
<p>Please login using the username and password you were assigned.</p>
<form id="logonForm" method="post" action="">
<label class="logonFormLabel"><input type="text" name="email" id="email" value="<?=$_POST['email']?>" class="required email logonFormText "/><br />
USER NAME</label>
<label class="logonFormLabel"><input type="password" name="Password" id="Password" value="" class="required logonFormText"/><br />
PASSWORD</label>
<p style="padding:30px 0 0 0">Lookup Your Laboratory or Facility Request Login Information Forgot Your Password?</p>
<p style="padding:20px 0 0 0"><input type="submit" class="button" name="submit" id="submit" value="SUBMIT" /></p>
</form>
</div><!--logonInner-->
</div><!--logon-->
</div><!--wrapper-->
What's wrong with my CSS?
Make sure you clear; both after the Floated Elements and make sure... If you ever have a absolutely positioned element to have the parent element with the position of relative.
#parent {
position: relative;}
#child {
position: absolute;}
Then of course after you declare your floated elements, make sure you add a clear after them.
#element {
clear: both;}
Hope that helps!
I added text-align:center to #wrapper.
I want to style the html5 input type 'range'.
I am trying to create a mobile website using jquerymobile, but having a bit trouble on styling it in the right way.
I want to have two labels, one at each end of the range selecter, and want the 'pen' to be a black thin stroke.
Right now I have something like this
<label for="slider">None</label>
<input type="range" name="slider" id="slider" value="0" min="0" max="100" />
<label for="slider" style="text-align: right;">Many</label>
I found the solution by myself.
<style type="text/css" media="screen">
/* Hide text-field*/
#slider {
display: none;
}
div.ui-slider {
width: 90%;
}
label.ui-block-right{
text-align: right;
float: right;
}
.min-width-480px div.ui-slider {
width: 90%;
}
.min-width-480px label.ui-slider {
width: 50%;
}
/* Slider is displayed as a thin stroke */
.ui-slider .ui-slider-handle {
width:2px;
height:30px;
background:url(images/slider-picker.gif) repeat-y; overflow: hidden;
position:absolute;
border-style:none;
margin-left: 0px;
margin-top: -15px;
}
</style>
And the HTML
<div data-role="fieldcontain">
<input type="range" name="slider" id="slider" value="0" min="0" max="100" />
<div class="ui-grid-a" >
<div class="ui-block-a"><label for="slider">None</label></div>
<div class="ui-block-b"><label class="ui-block-right" for="slider">Many</label></div>
</div>
</div>