...

View Full Version : Help me with my css.



Theteva
02-09-2012, 08:46 PM
Can someone help me with my css. Im kinda new on html and css. Ok so I wanna make a text box but I dont know how to get it in the middle. can some one help me.

html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html lang="en">

<head>
<title>Capital Online</title>
<link rel="stylesheet" href="themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>

<div id="header">

<ul id="awesome-menu">
<li><a href="index.html" class="home">Home</a></li>
<li><a href="download.html" class="download">Download</a></li>
<li><a href="store.html" class="store">Store</a></li>
<li><a href="forum.html" class="forum">Forum</a></li>
<li><a href="contact.html" class="contact">Contact</a></li>
</ul>


<div id="menybg"></div>

</div>


<!-- jQeury images -->
<div id="headerimgs">
<div id="headerimg1" class="headerimg"></div>
<div id="headerimg2" class="headerimg"></div>
</div>


<!-- Arrows -->
<div id="NextBack">
<div id="next" class="btn"></div>
<div id="back" class="btn"></div>
</div>



<div id="wrapper">












<div class="slider-wrapper theme-default">
<div class="ribbon"></div>
<div id="slider" class="nivoSlider">
<img src="images/welcome.jpg" alt="" title="Welcome to Capital Online!<br> This is a recently new server so have in mind their might be some unexpected bugs. Report the bugs and you have a chanse of getting a reward" />
<a href="http://dev7studios.com">
<img src="images/up.jpg" alt="" title="Expansion <br> comming soon!" /></a>
<img src="images/walle.jpg" alt="" data-transition="slideInLeft" />
<img src="images/nemo.jpg" alt="" title="#htmlcaption" />
</div>
</div>

<div id="contenttop"></div>

<div id="content"></div>



</div>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>

<div id="allt">

<div id="top">

<h3>Max test</h3></div>
<p>max dette är jätte bra och lätt att lägga in</p>
<div id="bottom">
</div>

<div id="top">
<h3>Detta är min andra rubrik</h3></div>
<p>min klass är inkompitent</p>
<div id="bottom">
</div>

<div id="top">
<h3>Detta är min rubrik</h3></div>
<p>är dette min text box jag söker tro?</p>
<div id="bottom">
</div>

</div>

</body>
</html>

CSS


/*====================*/
/*=== Reset Styles ===*/
/*====================*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin:0;
padding:0;
border:0;
outline:0;
font-weight:inherit;
font-style:inherit;
font-size:100%;
font-family:inherit;
vertical-align:baseline;
} h1 {
font: Tahoma, Geneva, sans-serif;
font-size:16px;

}

table {
border-collapse:separate;
border-spacing:0;
}
caption, th, td {
text-align:left;
font-weight:normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:"";
}
blockquote, q {
quotes:"" "";
}
/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {
display: block;
}

/*===================*/
/*=== Main Styles ===*/
/*===================*/

a, a:visited {
color:blue;
text-decoration:none;
}
a:hover, a:active {
color:#000;
text-decoration:none;
}

.theme-default #slider {
margin:100px auto 0 auto;
width:760px; /* Make sure your images are the same size */
height:360px; /* Make sure your images are the same size */
}
.theme-pascal.slider-wrapper,
.theme-orman.slider-wrapper {
margin-top:150px;
}

/*====================*/
/*=== Other Styles ===*/
/*====================*/
.clear {
clear:both;
}

/* Positions */

#wrapper {
width: 900px;
margin-right:auto;
margin-left:auto;
position: relative;
}
#header {
width: 900px;
margin-right:auto;
margin-left:auto;
position: relative;
}

body {
background-color:#000000;
}

#contenttop {
background-image:url(images/fill%20top%202.png);
background-position:center;
height: 200px;
width: 900px;
margin-top: 185px;
}

#content {
background-image:url(images/web%20content.png);
background-position:top center;
width:900px;
height:1000px;
}

#menybg {
background-image:url(images/filler%20pot.png);
background-position:center top;
height: 126px;
}

ul#awesome-menu {
width: 786px;
margin: 0 auto;
padding: 0;
list-style: none;
background-position:center;
}

ul#awesome-menu li { display: inline; }

ul#awesome-menu li a {
display: block; float: left; height: 55px;
background-image: url(images/alla.png); text-indent: -9999px;
margin-top: 20px;
}

ul#awesome-menu li a.home {
width: 124px; background-position: 0 0;
}

ul#awesome-menu li a.download {
width: 210px; background-position: -124px 0;
}

ul#awesome-menu li a.store {
width: 140px; background-position: -334px 0;
}

ul#awesome-menu li a.forum {
width: 151px; background-position: -474px 0;
}

ul#awesome-menu li a.contact {
width: 161px; background-position: -630px 0;
}


ul#awesome-menu li a.home:hover, ul#awesome-menu li a.home:focus {
background-position: 0 -55px;
}

ul#awesome-menu li a.download:hover, ul#awesome-menu li a.download:focus {
background-position: -124px -55px;
}

ul#awesome-menu li a.store:hover, ul#awesome-menu li a.store:focus {
background-position: -334px -55px;
}

ul#awesome-menu li a.forum:hover, ul#awesome-menu li a.forum:focus {
background-position: -474px -55px;
}

ul#awesome-menu li a.contact:hover, ul#awesome-menu li a.contact:focus {
background-position: -630px -55px;
}


/* Slider Arrows */

#NextBack {
}


.btn {
height:71px;
width:61px;
cursor:pointer;
}

#back {
background-image:url(images/btn_back.png);
margin-right: 800px;
background-repeat: no-repeat;
height: 71px;
width: 63px;
float:left;
margin-top:220px;
}
#next {
background-image:url(images/btn_next.png);
float:right;
margin-top:220px;
}

.headerimg {
background-position: center top;
background-repeat: no-repeat;
width:100%;
height:505px;
position:absolute;
top:140px;
margin-top: 50px;
}

h1 {
font-size:30px;
font-family:Tahoma, Geneva, sans-serif;
}

ul#post {
position:absolute;
top: 980px;
margin-right: 80px;
margin-left: 30px;
padding: 0;
list-style: none;
}
#holder p {
border-right: 1px solid #333;
border-left: 1px solid #333;
padding: 10px 15px;
margin: 0px;
}
#top {
width: 800px;
height: 30px;
border: 1px solid #333;
background-color: #0F6;

}
#top h3 {
margin: 0px;
line-height: 30px;
padding: 0px 10px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 15px;

}

#bottom {
width: 800px;
height: 30px;
border: 1px solid #333;
margin-bottom: 50px;
}
#allt {
position: absolute;
top: 1250px;
width: 900px;

}

dylanbaumannn
02-09-2012, 10:52 PM
one way to center anything is to set it to the following

CSS


.textbox{
position:relative;
width:200px;
left:50%;
margin-left:-100px;
}


Just set your position to relative, set your width to [width of your textbox] and then set the margin-left to [negative 1/2 of the width of your textbox]

EDIT: See below for a better method

Kevin_M_Schafer
02-09-2012, 11:27 PM
Hi dylanbaumannn,

May I jump in here? I just tried your example and it worked.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style type="text/css">
.textbox{
position:relative;
width:200px;
height:400px;
border: 1px solid #ff0000;
left:50%;
margin-left:-100px;
}
</style>
</head>
<body>
<div class="textbox"></div>
</body>
</html>


I've always used settings such as margin: 0px auto; or margin-left:auto; margin-right:auto.

Your way worked. Is it really the best way? I'm not teasing you, I'm just asking. I'm still learning about coding. Thanks for the post.

--Kevin

.

Apostropartheid
02-09-2012, 11:55 PM
Hi dylanbaumannn,

May I jump in here? I just tried your example and it worked.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style type="text/css">
.textbox{
position:relative;
width:200px;
height:400px;
border: 1px solid #ff0000;
left:50%;
margin-left:-100px;
}
</style>
</head>
<body>
<div class="textbox"></div>
</body>
</html>


I've always used settings such as margin: 0px auto; or margin-left:auto; margin-right:auto.

Your way worked. Is it really the best way? I'm not teasing you, I'm just asking. I'm still learning about coding. Thanks for the post.

--Kevin

.

In a word: no.

Relative positioning moves content out of the normal flow. Centring by margins is both simpler and more flexible.

VIPStephan
02-09-2012, 11:59 PM
The auto margin way is certainly the better way compared to the position with negative margin one because you only have to change one value (the width) instead of two (width and margin) if anything is changing. The method suggested by dylanbaumannn comes in handy when you want to center an absolutely positioned element, though.

dylanbaumannn
02-10-2012, 05:23 PM
The auto margin way is certainly the better way compared to the position with negative margin one because you only have to change one value (the width) instead of two (width and margin) if anything is changing. The method suggested by dylanbaumannn comes in handy when you want to center an absolutely positioned element, though.

haha, gotcha. Sorry for the confusion :D I've updated my post



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum