I have custom built CSS for me but am no longer in contact with the creator. I wanted to make a div (#rightcolumn) bigger by 55px. I did this by making iframe in the div bigger and it auto expands for me. However the banner, (#topsection), became a little short - so I had to add 55px to that to make it 1255px width.
Now page is off center some. When I try to edit other float commands to fix, the div's end up all over. I've tried for a few days. If anyone could help now with re-centering this. I would really appreciate.
Test page: Serious Sports Bigger
Link to css: CSS link
New Css
body {
margin:0;
padding:0;
line-height:1.5em;
background:#C0C0C0;
}
b {
font-size:110%;
}
em {
color:red;
}
#maincontainer {
width:1200px;
margin:0 auto;
}
#topsection {
background:#191919;
height:90px;
width:1255px
}
#contentwrapper {
float:left;
width:100%;
}
#contentcolumn {
margin:0 360px 0 180px;
color:#F1F1F1;
}
#leftcolumn {
float:left;
width:180px;
margin-left:-1200px;
background:#C8FC98;
}
#rightcolumn {
float:left;
width:355px;
margin-left:-355px;
background:#E5E5E5;
}
#footer {
clear:left;
width:100%;
background:#191919;
color:#FFF;
text-align:center;
padding:4px 0;
}
#footer a {
color:#62C301;
}
.innertube {
margin:10px;
margin-top:0;
}
.arrowgreen {
width:180px;
border-style:solid solid none solid;
border-color:#94AA74;
border-size:1px;
border-width:1px;
}
.arrowgreen ul {
list-style-type:none;
margin:0;
padding:0;
}
.arrowgreen li a {
font:bold 12px Verdana, Arial, Helvetica, sans-serif;
display:block;
background:transparent url(http://i39.tinypic.com/2r2rhnc.gif) 100% 0;
height:24px;
padding:4px 0 4px 10px;
line-height:24px;
text-decoration:none;
}
.arrowgreen li a:link, .arrowgreen li a:visited {
color:#5E7830;
}
.arrowgreen li a:hover {
color:#26370A;
background-position:100% -32px;
}
.arrowgreen li a.selected {
color:#26370A;
background-position:100% -64px;
}
You also have to change DOCTYPE to
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
#maincontainer is only 1200px;, your contents are overflowing. Solution:
#maincontainer{
width:1255px; margin:0 auto;
}
Try to add this:
body {
margin : 0 auto;
}
All the CSS is being applied twice, you will need to look into that.
Just apply the following CSS:
#maincontainer {
width: 1255px;
margin: 0 auto;
}
#contentwrapper {
float: left;
width: 1200px;
}
Related
I set the image header width to 100% and when i check the max-width of 959px or lower[i set it to that] i notice the image does not respond and move along like it should. It actually gets even bigger than normal for some reason. My aside and section are working properly however.
jsfiddle - http://jsfiddle.net/u04xr6pd/2/
<div class="container">
<header>
<img src="images/header.png" alt="taffies logo">
</header> <!-- end of header -->
</div>
CSS
#media screen and (max-width:959px){
.container{
width:100%;
}
.sidebar{
width:30%;
}
.first_article{
width:50%;
}
header img{
width:100%;
}
}
I would recommend this code...
header img{
width:calc(100% - 50px);
margin:0 auto !important;
}
and apply that EXACT same width to this class .first_article to make it more responsive.
You also have this code in your CSS:
header img {
padding: 43px;
margin-left: 260px;
}
So when your window width is less than 959px, your image will have width: 100% but also the padding and margin, pushing it to the right. You need to add rules for padding and margin in your #media code as well. Something like:
#media screen and (max-width: 959px) {
header img {
width: 100%;
padding: 0 !important;
margin: 0 !impotant;
}
}
Adjust the numbers as needed.
The !important is there because you've defined the #media section first, which would then be overridden by the normal rules defined later. If you move the #media section below the normal rules, then you don't need !important.
You have several misconceptions, but I can see you're trying and learning, so I want to give you some recognition on that. Now, for your problem, there are some thing to change, but the most important part: media queries goes AFTER the default definitions, not at the top, or you'll always have issues. So you need to change that, and then alter some things in your CSS, just not as many as when you started with this project a week ago or so. So take a look at your forked and cleaned fiddle
* {
margin:0px;
padding:0px;
list-style-type:none;
}
header, nav, section, article, aside, footer {
display:block;
}
.container {
width:960px;
margin:0 auto;
}
body {
background-color:#e8d4cb;
}
header img {
padding:43px;
margin-left:260px;
}
.first_article {
float:left;
width:500px;
margin:25px;
}
.first_main_paragraph {
font-family:arial;
font-size:20px;
color:#846a5f;
margin-bottom:50px;
}
.second_main_paragraph {
font-family:arial;
font-size:13px;
color:#846a5f;
}
.first_article .contact_button {
float:left;
margin-top:165px;
}
.first_article .cupcake {
float:left;
margin-top:20px;
margin-left:19px;
}
.sidebar {
float:left;
margin:30px;
margin-right:40px;
}
nav ul li a {
text-decoration:none;
font-family:myriad pro;
font-size:20px;
color:#3d2316;
display:inline-block;
padding-left:85px;
padding-right:29px;
padding-top:26px;
padding-bottom:26px;
width:39%;
}
nav ul li:hover a {
color:#e8d5cc;
}
nav ul li {
margin-bottom:3px;
background-color: #CBAFA2;
}
nav ul li:hover {
background-color: #3D2316;
}
.company_info {
background-color:#cbafa2;
padding:20px;
text-align:right;
margin-bottom:100px;
font-size:14px;
color:#3d2316;
font-family:myriad pro;
}
.about_section {
float:left;
width:500px;
margin:25px;
}
.about_title {
color:#3d2316;
margin-bottom:50px;
font-family:arial;
font-size:30px;
}
.about_text {
font-family:arial;
font-size:13px;
color:#846a5f;
}
.orders_section {
float:left;
width:500px;
margin:25px;
}
.orders_title {
color:#3d2316;
margin-bottom:50px;
font-family:arial;
font-size:30px;
}
.second_order {
margin-top:50px;
}
.order_text {
font-family:arial;
font-size:11px;
color:#846a5f;
}
.order_numbers {
color:#3D2316;
}
.gallery_section {
float:left;
width:600px;
margin:25px;
}
.gallery_title {
color:#3d2316;
margin-bottom:50px;
font-family:arial;
font-size:30px;
}
.contact_section {
float:left;
width:500px;
margin:25px;
}
.contact_title {
color:#3d2316;
margin-bottom:50px;
font-family:arial;
font-size:30px;
}
.contact_text {
font-family:arial;
font-size:13px;
color:#846a5f;
}
footer {
clear:both;
font-family:arial;
border-top:1px solid #aa8573;
height:100px;
}
footer p {
color:#784f3d;
margin:10px;
float:left;
margin-right:370px;
margin-top:30px;
}
footer ul li a {
text-decoration:none;
font-size:13px;
color:#784f3d;
float:left;
margin:10px;
margin-top:30px;
}
footer ul li a:hover {
color:#3d2316;
}
figure {
float:left;
margin:25px;
}
figcaption {
text-align:center;
font-family:arial;
font-size:13px;
color:#846a5f;
margin-top:15px;
}
span {
font-family:arial;
font-size:15px;
color:#846a5f;
font-weight:bold;
}
#media screen and (max-width:959px) {
.container {
width:100%;
}
.sidebar {
width:30%;
}
.first_article {
width:50%;
}
header {
text-align:center
}
header img {
width:100%;
max-width:462px;
height:auto;
padding:0px;
margin:0px auto;
}
}
As you will notice, besides moving the media queries, I'm removing your margins and paddings for the image since you don't need them at all, centered everything inside the header and limiting the width of your image so it will be 100% UP to 462px which is the real size of your image. And that's it, your image now is perfectly centered and isn't out of control. And while you still have several issues in your page, you're really close (btw, it's a show of respect to vote up and accept answers since you're getting so much help here)
This is the HTML Can someone please help me? I can't remove the little margin above the navigation.
I've already tried padding:0px and margin-top:0px
<body>
<div id="wrap">
<div class="top_portion">
<img src="img/icbox.png">
</div>
<div id="welcome">
<h1>Welcome to my blog about the married life</h1>
<h3>Ain't much to see here for now!</h3>
</div>
<div id="navigation">
<ul>
<li><a href="#Home">Home</li>
<li><a href="#About">About</li>
<li><a href="#Pictures">Pictures</li>
</ul>
</div>
</div>
</body>
</html>
AND THIS IS THE CSS Sorry it's been a while since I've been back to this website
body {
background-color:white;
font-family: 'Josefin Slab', serif;
}
.top_portion {
width:800px;
height:200px;
background-color:#e2e2e2;
margin:auto;
text-align:center;
border-top:5px;
border-bottom:5px;
border-left:0px;
border-right:0px;
border-style:solid;
border-color:#30474b;
}
.top_portion img {
padding-top:35px;
}
#welcome h1 {
margin-top:0px;
text-align:center;
padding:0px;
margin-bottom:0px;
}
#welcome h3 {
margin-top:0px;
text-align:center;
}
#welcome {
font-family:sans-serif;
margin:auto;
background-color:#e2e2e2;
width:800px;
}
#navigation {
text-align:center;
}
#navigation li {
list-style-type:none;
display:inline;
}
ul {
margin-top:0;
}
ul a {
padding-right:20px;
text-decoration:none;
}
ul a:hover {
text-decoration:underline;
}
It is the h3
Margin:0; does the trick.. Where did you aply the margin:0; earlier?
h3 {margin:0;}
In your case you should change your #welcome h3 to:
#welcome h3 {
margin: 0;
}
DEMO
Try This:
I think its because of the default behavior of Heading.
Style:
html, body
{
padding: 0;
margin: 0;
}
#welcome h3 {
margin-top:0px;
margin-bottom:0px;
text-align: center;
}
/*Or you can try
#welcome h3 {
margin:0;
text-align: center;
}*/
Here is the Demo
I have changed these things in your query
#navigation {
text-align:center;
margin-top:0px;
}
#welcome h1 {
margin-top:0px;
text-align:center;
padding:0px;
margin-bottom:0px;
}
#welcome h3 {
margin-top:0px;
text-align:center;
margin-bottom:0px;
}
workingFiddle
Since you want to remove margin from the top for your navigation bar you could possibly try this:
#navigation {
margin-top: 0px;
border-top: 0px;
}
As, you are including list in your navigation it may eat up some of your space too. Try including this:
#navigation li {
margin-top: 0px;
}
Possibly, you can also try for:
#welcome h3 {
margin: 0px;
margin-bottom: 0px;
}
H3, because this would hold just the line above your navigation bar
how do i make the center like the links are all off to the left i want them to be center top of the web page... any help?? i have done this before but i dont rember how
CSS:
body {
background: #B0FFF5
}
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left; /*supposed to be there */
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#ffffff;
background-color:#3B5998;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#ffffff;
color:#3B5998;
}
HTML:
<body>
<ul>
<li>Home</li>
<li>Fb Fame</li>
<li>Donate</li>
<li>Facebook</li>
</ul>
</body>
If you want the buttons to line up, no matter what the window size is, set a fixed width and margin: 0 auto:
ul
{
width: 512px;
margin:0 auto;
}
Here is a demo.
Alternatively remove the whitespace between the list items (or use another technique), set their display to inline-block and give the container a text-align: center:
ul
{
margin:0;
text-align: center;
}
li
{
display: inline-block;
}
Here is a demo.
ul
{
list-style-type:none;
margin:0;
padding:0;
width: 400px;
margin: 0 auto;
}
Hope this helps.
ul
{
width:600px;
list-style-type: none;
margin-left:auto;
margin-right:auto;
padding:0;
}
i remberd how to do it sorry folks
hey guys i'm trying to create a navigation system similar to the one you can find on starbucks.com. Here is the link to my sample: http://dl.dropbox.com/u/73992/js_tests/test.htm I am accomplishing the effect with navigation sample on the bottom but as you can see there are positioning problems. You can find the CSS in the source code. I figured this is the best way to test it. Thank you in advance for any help I can get it.
as per the suggestion here's the css
*
{
margin:0;
padding:0;
}
#nav
{
position:relative;
margin-top:3em;
margin-left:3em;
}
#nav ul
{
list-style-type:none;
}
#nav ul li
{
position:relative;
margin-top:10px;
}
#nav ul li ul li
{
margin-top:0px;
}
#nav ul li h1
{
font-size:15px;
font-weight:bold;
text-align:center;
color:#000000;
background-color:#F7FF88;
border:solid 5px black;
width:100px;
height:30px;
border-bottom:none;
z-index:20;
}
.content
{
position:relative;
width:300px;
background-color:#F7FF88;
border:solid 5px black;
}
.content form
{
display:block;
margin:10px 10px 10px 10px;
}
.content p
{
text-align:left;
display:block;
margin:10px 10px 10px 10px;
}
.gallery
{
margin:10px 10px 10px 10px;
background-color:#ffffff;
border:solid 1px black;
}
.gallery img
{
display:inline-block;
margin:10px 5px 10px 0px;
float:left;
}
/*
This next section is identical but represents what happens w/ the absolute positioning.
*/
.content2
{
position:absolute;
width:300px;
background-color:#F7FF88;
border:solid 5px black;
top:30px;
z-index:-5;
}
.content2 form
{
display:block;
margin:10px 10px 10px 10px;
}
.content2 p
{
text-align:left;
display:block;
margin:10px 10px 10px 10px;
}
.clear
{
clear:both;
}
if this helps this is what I am trying to accomplish
Give this a try. Change the position from absolute to relative, and remove the 30px top margin. You should be able to get the same effect as the 3 examples above yours.
.content2
{
position: relative;
width:300px;
background-color:#F7FF88;
border:solid 5px black;
z-index:-5;
}
[EDIT]
First off, remove the "border-bottom:none;" so your h1 will still have bottom borders for that tabbed effect.
#nav ul li h1
{
font-size:15px;
font-weight:bold;
text-align:center;
color:#000000;
background-color:#F7FF88;
border:solid 5px black;
width:100px;
height:30px;
z-index:20;
}
Give your h1 a class, let's say "tabbed"
<li><h1 class="tabbed">Ex. 1</h1>
And probably use some negatives for your CSS.
h1.tabbed {
position:absolute;
top:-28px;
}
Give this one a try.
Put display:inline; on li
And float:left; on ul
I think it's your big problem, if I had understand well your problem.
float : left can solve your positioning problem. You have to add just two lines in your css
#nav ul li {
float: left;
margin: 0 15px;
position: relative;
}
OK, so if you check out http://www.marioplanet.com you can see that I am trying to mimic the design of apple.com for my menu bar, including my global search bar.
Now, I'm trying to mimic Apple's input field for the global search bar, as close as I possibly can, so I need some help here.
I would like the field to be centered in the middle, which I tried by using maring: auto auto; but that did not work..
I also would like to use the rounded corner technique, from Apple's site, but I'm not sure how to do that. Is that CSS3?
I also need to have a grayed out placeholder string reading Search but I think I may be able to use JS for that. If can use HTML or CSS, please let me know.
The little spotlight / magnifying glass image aligned to the left side of the input field is nice, but not necessary :)
OK, you can check out the site, but here is the code as well:
index.htm:
<div id="globalheader" class="apple">
<!--googleoff: all-->
<ul id="globalnav">
<li id="gn-home">Home</li>
<li id="gn-catalog">Shop!</li>
<li id="gn-about">About</li>
<li id="gn-contact">Contact</li>
<li id="gn-media">Media</li>
</ul>
<div id="globalsearch">
<form id="searchform">
<div>
<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" />
</div>
<div id="suggestions"></div>
</form>
</div>
<!--googleon: all-->
</div>
default.css:
body {
background-color: #666666;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#header {
background-color: #DDDDDD;
width: 1130px;
margin: 0px auto;
}
#content {
width: 1130px;
margin: 0px auto;
}
#leftcol {
background-color:#EBEBEB;
width: 200px;
height: 550px;
font-size:14px;
clear: both;
float: left;
}
#detail {
background-color:#FFFFFF;
width: 730px;
height: 550px;
font-size:12px;
float: left;
}
#rightcol {
background-color:#EBEBEB;
width: 200px;
height: 550px;
font-size:14px;
float: left;
}
#footer {
background-color:#DDDDDD;
width: 1130px;
height:90px;
font-size:12px;
text-align:center;
clear: both;
margin: 0px auto;
}
h1 {
color: #FF0000;
}
h2 {
color:#FF0000;
}
a:link {
color:#FF0000;
}
a:visited {
color:#FF0000;
}
a:hover {
color:#00FF00;
}
a:active {
color:#FF0000;
}
img {
border:none;
}
#eznetseal {
text-align:center;
}
a.trayIcon {
position: relative;
top: 20px;
}
a.trayIcon:hover {
top: 7px;
}
#twittericon {
left: 0px;
}
#facebookicon {
left: 22.5px;;
}
#youtubeicon {
left: 45px;;
}
#tray {
position:relative;
}
#container {
position:relative;
margin-top: -40px;
}
#nav li
{
display: inline;
}
#features
{
vertical-align: top;
}
globalsearch.css:
/* BASIC RESET */
body, div, img, p { padding:0; margin:0; }
a img { border:0 }
/* HTML ELEMENTS */
body { font-family:"Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; }
/* COMMON CLASSES */
.break { clear:both; }
/* SEARCH FORM */
#searchform { margin:auto auto; font-size:18px; }
#searchform div { color:#eeeeee; }
#searchform div input { font-size:18px; width:120px; }
#suggestions{ position: relative; left:235px; width:320px; display:none; }
/* SEARCHRESULTS */
#searchresults { border-width:1px; border-color:#919191; border-style:solid; width:320px; background-color:#a0a0a0; font-size:10px; line-height:14px; }
#searchresults a { display:block; background-color:#e4e4e4; clear:left; height:56px; text-decoration:none; }
#searchresults a:hover { background-color:#b7b7b7; color:#ffffff; }
#searchresults a img { float:left; padding:5px 10px; }
#searchresults a span.searchheading { display:block; font-weight:bold; padding-top:5px; color:#191919; }
#searchresults a:hover span.searchheading { color:#ffffff; }
#searchresults a span { color:#555555; }
#searchresults a:hover span { color:#f1f1f1; }
#searchresults span.category { font-size:11px; margin:5px; display:block; color:#ffffff; }
#searchresults span.seperator { float:right; padding-right:15px; margin-right:5px;
background-image:url(../images/shortcuts_arrow.gif); background-repeat:no-repeat; background-position:right; }
#searchresults span.seperator a { background-color:transparent; display:block; margin:5px; height:auto; color:#ffffff; }
Thanks!
On the div containing the textbox try text-align: center; border-width: 0px; margin-top: 6px; to do the watermark try a jquery watermark plugin
For the rounded corners apple are inserting images into spans either end. I have seen the magnifying glass done this way or by setting the image as a background-image and adding padding to avoid overwriting it.
If I were you id download firebug for firefox so you can explore the markup and css yourself, it's quite easy.
Hope this helps.
I used Firebug and Web Developer extension to find following...
Apple definately use javascript ( and of course css) to make that search box look preety.
if you turn of javascript using noscript you will see a normal square text box.
you can check following javascript and css files to figure out whats going on.
http://images.apple.com/global/scripts/search_decorator.js
http://images.apple.com/global/nav/styles/nav.css
in css files take a look at following rule set
#globalsearch .search-wrapper .left
and
#globalsearch .search-wrapper .right
following are the images used to create the search box
http://images.apple.com/global/nav/images/searchfield_leftcap.png
http://images.apple.com/global/nav/images/searchfield_rightcap.png
I found following interesting things.
They have dedicated script file just to make that search box look pretty
They do not use image sprites.
I tried to smush one of the above images and was able to smush it by 15% ( it might look trivial but when you are looking at website visited by millions this can become a big number )