.container {
width: 800 px;
margin: 0 auto;
}
#main {
background: url(images/header_slice.jpg) repeat-x;
}
#main.container {
background: url(images/header.jpg) no-repeat;
}
#sidebar {
float: left;
}
#sidebar h3 {
font-size: 24px;
color: #044055;
font-weight: normal;
}
#sidebar ul li a {
font-size: 14px;
color: #393838;
}
ul#subscribe li a {
font-size: 18px;
padding-left: 30px;
}
#sidebar ul {
list-style: none;
}
#sidebar {
float: left;
margin-left: 155px;
margin-top: 35px;
background: #d4d6d3;
border: 1px solid #BEBDBD;
padding: 15px 15px 30px 30px;
}
#sidebar h3 {
font-size: 24px;
color: #044055;
font-weight: normal;
padding-bottom: 20px;
padding-left: 15px;
}
#sidebar ul {
list-style: none;
padding-bottom: 25px;
}
#sidebar ul li a {
font-size: 14px;
color: #393838;
}
ul#subscribe li {
padding-bottom: 5px;
}
ul#subscribe li a {
font-size: 16px;
padding-left: 40px;
}
ul#subscribe li {
padding-bottom: 5px;
padding-left: 35px;
}
li#rss {
background: url(images/rss_icon.png) no-repeat;
background-size: 20px;
}
li#email {
background: url(images/email_icon.png) no-repeat;
background-size: 20px;
}
li#twitter {
background: url(images/twitter_icon.png) no-repeat;
background-size: 20px;
}
I was learning how to make a basic website from: https://code.tutsplus.com/tutorials/design-and-code-your-first-website-in-easy-to-understand-steps--net-6062
The header background from the container isn't loading.
Also the the sidebar icons are being overlapped by the text. I tried adding padding in the sidebar anchor but it didn't work. What am I doing wrong?
fist have some padding to the left from your icon so you text won't overlap it and then for background say that it should appear on the left side , center vertically. I shown how to do with li for twitter
li#twitter {
padding-left: 66px;
background: url(your-icon-path.png) no-repeat left center;
}
here i am assuming that your icon's size is 50 px and for left padding from that icon i added 16 px to it, so that your icon doesn't get covered by your content.
if you wish you could take a look at the answer that i gave someone previously Link
Related
For my website (www.heretoedit.com) I want to move the text in my navbar so that the "about" button is lined up with the rest of my website's text but the "contact" button stays put. Plus I want to stop the text for the "extras" and "contact" buttons from moving down when the screen size gets reduced.
Below is my navbar code, any help would be much appreciated. Thanks.
#navbar {
background-color: #0299EB;
font-family: Verdana, Geneva, sans-serif;
color: white;
font-weight: bold;
position: absolute;
width: 1000px;
min-width: 100%;
height: 70px;
top: 150px;
left: 0px;
}
#navbar ul {
list-style:none;
display:inline-block;
margin-left: 130px;
margin-top: 25px;
}
#navbar li {
float:left;
padding: 0 9px;
text-align:center;
left: 0px;
}
#navbar a:link {
padding: 0 30px;
text-decoration: none;
color: #FFF;
}
#navbar a:hover {
color: black;
text-decoration: none;
}
#navbar a:visited {
color: #FFF;
padding: 0 20px;
text-decoration: none;
}
#navbar ul {
list-style: none;
display: inline-block;
/* Add these */
margin: 25px 0px;
padding: 0;
width: 100%;
text-align: center;
}
#navbar li {
/* float: left; // Remove this */
padding: 0 9px;
text-align: center;
left: 0px;
display: inline-block; /* Add this */
}
I'm not really a champ when it comes to CSS, so I was hoping I could get some assistance.
Right now I got one parent div with two child divs. Currently, whenever I resize the browser, the two divs overlap each other. I want the left div to be visible at all times.
It can be viewed in action over here: http://unlimitedbrettworks.com/forums/
CSS:
#header {
position: relative;
height: 140px;
overflow: hidden;
background-color: #E1E1E1; }
#logo a {
overflow: hidden;
float: right;
width: 620px !important;
height: 190px !important;
cursor: pointer;
background: url(../images/art/logo.png) no-repeat;
}
#userarea {
float: left;
margin: 0 1em;
padding: 1.5em 1em 0 1em;
text-align: left;
font-size: 0.95em;
width: 38em;
color: #313131;
font-family: tahoma, sans-serif;
line-height: 130%;
}
#userarea a:link, #userarea a:visited {
color: #333333;
}
#userarea a:hover {
color: #800000;
text-decoration: underline;
}
#header {
position: relative;
height: 140px;
overflow: hidden;
background-color: #E1E1E1; }
#logo a {
overflow: hidden;
float: right;
width: 620px !important;
height: 190px !important;
cursor: pointer;
background: url(../images/art/logo.png) no-repeat;
}
#userarea {
float: left;
margin: 0 1em;
padding: 1.5em 1em 0 1em;
text-align: left;
font-size: 0.95em;
width: 38em;
color: #313131;
font-family: tahoma, sans-serif;
line-height: 130%;
height: 122px; /* is value is the height min the padding you use.*/
}
#userarea a:link, #userarea a:visited {
color: #333333;
}
#userarea a:hover {
color: #800000;
text-decoration: underline;
}
That is the first problem. The second is on line 128 in your css file.
div#wrapper
{
margin: 0 auto;
min-width: 764px;
max-width: 2300px;
border: 10px solid #333333;
}
Needed to be:
div#wrapper
{
margin: 0 auto;
min-width: 1024px;
max-width: 2300px;
border: 10px solid #333333;
}
I went to your site, and played with Chrome's inspector, and found an answer.
Try adding these properties to #userarea:
#userarea {
position: absolute;
background-color: #E1E1E1;
height: 100%;
}
Hope this helps
Sorry, I didn't get your question... in the page you linked the #userarea div is always visible even if you resize the window.
To see the #logo div entirely, remove the 'height ' attribute from the parent div #header and it will go on a new line if the window is not large enough.
I have add the footer to EasyCareBath.com, and I can get the div to work properly except for ".footer_box", it will not center. I have added "left: 15%" and when you blow the window up, it's no longer aligned. Am I missing something or did I do too much to the css?
.footer_spacer {
height: 50px;
}
.footer_wrapper {
height: 375px;
background-color: #e6dccb;
}
.footer {
border-top: 10px solid #789E65;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.6);
margin-top: 0px;
/*min-width: 1007px;*/
height: 235px;
background-attachment: scroll;
background-image: url(../images_footer/footer_bg.png);
background-repeat: repeat-x;
background-position: center top;
position: relative;
}
.footer_box {
height: 236px;
width: 1007px;
/*position: relative;*/
}
.footer_copyright {
width: 100%;
/* [disabled]height: 100px; */
/*float: left;*/
padding-top: 15px;
position: relative;
text-align: center;
word-spacing: normal;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: 100;
font-variant: normal;
text-transform: none;
color: #354245;
}
#footer_col_01 {
position:absolute;
left:11px;
top:3px;
width:164px;
/*height:230px;*/
z-index:1;
}
#footer_col_02 {
position:absolute;
left:186px;
top:3px;
width:164px;
/*height:230px;*/
z-index:1;
}
#footer_col_03 {
position:absolute;
left:361px;
top:3px;
width:164px;
/*height:230px;*/
z-index:1;
}
#footer_col_04 {
position:absolute;
left:535px;
top:3px;
width:183px;
/*height:230px;*/
z-index:1;
}
#footer_col_05 {
position:absolute;
left:728px;
top:3px;
width:265px;
/*height:230px;*/
z-index:1;
font-size: 14px;
}
footer {
font-family: Arial, Helvetica, sans-serif;
color: #fff;
font-size: 11px;
float: left;
width: 100%;
}
footer a {
color: #FFF;
text-decoration: none;
}
footer a:hover {
color: #FFF;
text-decoration: underline;
}
footer h6 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: 500;
color: #00A1CC;
line-height: 46px;
/*margin-bottom: -2px;*/
}
footer li {
line-height: 18px;
list-style-type: none;
margin-left: 12px;
}
.footer_img_center {
text-align: center;
}
Alter your .footer_box rule to this:
.footer_box {
height: 236px;
width: 1007px;
margin: 0 auto;
position: relative;
}
The margin: 0 auto; centers the footer_box.
The position: relative; makes it so your absolutely positioned columns are positioned based on the footer_box instead of the body.
Side note / an analogy I've always liked:
Think of the 'auto' as attaching a rubber band to that side of the item connected to the edge of the page... in this case, 'auto' is on the right AND the left, so - if there's a rubber band pulling from both left AND right, it will always center, regardless of screen size.
Fix your css as following:
.footer_box {
height: 236px;
margin: 0 auto;
position: relative;
width: 1007px;
}
You were on the right track:
.footer_box {
height: 236px;
width: 1007px;
position: relative;
margin: 0px auto;
}
The auto margin on left and right will make sure the footer is always centered, no matter what the screen size is.
When highlighting text with IE 8 on a webpage that I'm currently developing the font changes and/or sometimes the size. The same thing happens sometimes when I hover over the menu.
This is how my css looks like and I don't know why the error occurs? One more thing that is very strange is that I have installed Windows 7 with paralells on my osx and the error does not occur there but only on PC computers. I have tried changing fonts but with no help...
This is my css:
body {
font-family: verdana, sans-serif;
font-size: 14px;
}
#wrapper, .wrapper {
width: 900px;
padding: 0 30px;
margin-left: auto;
margin-right: auto;
}
#header {
background: url('http://localhost:8888/wp-content/uploads/2012/09/120920_scam_banner.jpg') no-repeat;
height: 150px;
margin: 20px 0;
}
#header div {
width: 900px;
height: 150px;
margin-left: auto;
margin-right: auto;
position: relative;
background: none;
}
#header div a {
text-indent: -9999px;
position: absolute;
width: 900px;
height: 150px;
}
#header div a:hover {
background: none;
}
#section {
}
#menu {
float: left;
width: 175px;
padding: 20px 25px 0 0;
border-right: 2px solid #000;
text-align: right;
}
#menu a, a {
color: #000;
text-decoration: none;
}
.mp-formdiv {
float: right;
}
img {
border: 1px solid #000;
}
#menu a:hover, a:hover {
color: #fff;
background: #000;
}
.menu li {
margin: 3px 0;
text-align: right;
}
#menu h3 {
line-height: 52px;
}
#menu .artists {
padding-left: 10px;
}
#menu-artists li {
}
#content {
float: right;
width: 670px;
padding: 20px 0 50px 20px;
}
#footer {
overflow:hidden;
clear: both;
}
#white_footer {
float: left;
width: 300px;
background: #fff;
height: 20px;
}
#footer_content {
height: 20px;
}
.store {
overflow-y: scroll;
}
#the_store {
margin-top: 10px;
}
/* FONTS */
h1 {
font-size: 3em;
margin-bottom: 40px;
white-space: nowrap;
line-height: 0%;
}
h1.storefront {
font-size: 2em;
}
h2 {
font-size: 2em;
}
h3 {
font-size: 1.5em;
}
#content p strong {
font-weight: bold;
}
#content p img {
float: left;
margin: 5px 20px 20px 0;
}
#content p img:after {
margin-top: 20px;
}
#subscribe_mail input[type=text]{
width: 85px;
height: 12px;
font-size: 0.60em;
margin-bottom: 5px;
float: left;
margin-right: 4px;
}
#subscribe_mail input[type=text]:focus {
font-size: 0.75em;
}
#subscribe_mail input[type=submit] {
border: 1px solid #999;
font-size: 0.75em;
float: left;
}
.mp-message, .mp-loading {
font-size: 0.75em;
}
.MailPressFormName {
display: none;
}
#artist_info {
display: none;
margin-top: 40px;
overflow: hidden;
clear: both;
}
.more-less {
background: #000;
float: left;
color: #fff;
padding: 0 2px;
margin-top: 10px;
}
#artist_less {
display: none;
}
.gallery-icon a:hover {
background: none;
}
.gallery dl {
margin-top: 0 !important;
margin-bottom: 15px;
}
.gallery dl dd {
font-size: 0.75em;
}
.newsletterH {
margin-bottom: 5px;
}
I would use Firefox's Firebug plugin to see where the styles are coming from. IE provides a less friendly developer tool window that does something similar (I only use this if the style issue is only occurring in IE). I'd check your :hover and :focus rules first since those would cause things to happen on hover or select.
I am struggling mightily with the following CSS3 code:
*
{
margin: 0px;
padding: 0px;
border: none;
}
body
{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DBDBDB), to(#FFFFFF), color-stop(.7,#FFFFFF));
padding: 0px 6%;
}
#nav {
background: url(http://74.71.27.20/d499/content/images/nav_background.png);
}
ul#nav {
float: left;
}
ul#nav li {
display: inline;
width: 100%;
}
ul#nav li a {
display: inline;
float: left;
margin-right: 25px;
margin-left: 10px;
font-size: 16px;
line-height: 44px;
text-align: center;
text-decoration: none;
color: #777;
}
ul#nav li a:hover {
color: #fff;
}
ul#nav li.selected a {
color: #fff;
}
ul#nav li.subscribe a {
margin-left: 22px;
padding-left: 33px;
text-align: left;
background: url(http://74.71.27.20/d499/content/images/rss.png) left center no-repeat;
}
#container
{
float: left;
background: #FFFFFF;
overflow: hidden;
padding: 0 0 15px 10px;
}
#header
{
float: left;
width: 100%;
margin-bottom: 10px;
}
#header h1
{
font-size: 18px;
float: left;
background: url(http://74.71.27.20/d499/content/Images/logo.png) no-repeat;
padding: 45px 0px 5px 0px;
}
#promotion
{
height: 300px;
width: 700px;
background: url(http://74.71.27.20/d499/content/Images/home-showcase.png) no-repeat;
}
ul li a
{
font-size: 16px;
}
#main
{
float: left;
overflow: hidden;
padding: 0 0 15px 10px;
}
ul
{
list-style-type: square;
margin-left: 25px;
font-size: 14px;
}
ul#album-list
{
list-style: none;
margin-left: 0px;
}
ul#album-list li
{
height: 130px;
width: 100px;
float: left;
margin: 10px;
text-align: center;
}
ul#album-list li a, ul#album-list li .button
{
font-size: 13px;
float: left;
}
ul#album-list li a span
{
color: #9b9993;
text-decoration: underline;
}
#cart
{
float: right;
}
#update-message
{
color: #F6855E;
font-weight: bold;
}
.button, input[type=submit]
{
clear: both;
display: inline-block;
padding: 5px;
margin-top: 10px;
border: 1px;
background: #5e5b54;
color: #fff;
font-weight: bold;
}
.button a
{
color: #fff !important;
}
footer {
float: left;
left: 0;
width: 100%;
background: #222;
}
footer div {
display: table;
margin: 0 auto;
padding: 44px 0;
width: 940px;
color: #777;
}
p
{
margin-bottom: 15px;
margin-top: 0px;
}
h2
{
color: #5e5b54;
}
h2, h3
{
margin-bottom: 10px;
font-size: 16px;
font-style: italic;
font-weight: bold;
}
h3
{
color: #9B9993;
}
#header h1 a, h3 em
{
color: #5E5B54;
}
a:link, a:visited
{
color: #F6855E;
text-decoration: none;
font-weight: bold;
}
a:hover
{
color: #333333;
text-decoration: none;
font-weight: bold;
}
a:active
{
color: #006633;
text-decoration: none;
font-weight: bold;
}
/***************************** sidebar navigation ****************************/
#categories
{
float: left;
margin: 22px 0 0 22px;
padding: 11px 22px;
background: url(http://74.71.27.20/d499/content/images/sidebar_section_background.png) repeat-x;
/* Border-radius not implemented yet */
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
}
ul#categories
{
siaply: inlinel
margin: 0 0 0 22px;
list-style: none;
}
#categories a:link, #categories a:visited
{
float: left;
color: #9B9993;
text-decoration: none;
}
#categories a:hover
{
color: #F46739;
}
div#album-details p
{
margin-bottom: 5px;
color: #5e5b54;
font-weight: bold;
}
p em
{
color: #9b9993;
}
/* Form styles */
legend
{
padding: 10px;
font-weight: bold;
}
fieldset
{
border: #9b9993 1px solid;
padding: 0 10px;
margin-bottom: 10px;
clear: left;
}
div.editor-field
{
margin-bottom: 10px;
}
input[type=text], input[type=password], select
{
border: 1px solid #8A8575;
width: 300px;
}
/* Begin: Tables */
table
{
border: 1px solid #000;
border-collapse: collapse;
color: #666666;
min-width: 500px;
width: 100%;
}
tr
{
border: 1px solid #000;
line-height: 25px;
}
th
{
background-color: #9b9993;
color: #000;
font-size: 13px;
text-align: left;
}
th, td
{
padding-left: 5px;
}
tr:hover
{
background-color: #fff;
}
I currently got my PC as a web host you can view the site with the CSS here:
http://74.71.27.20/d499
Any help would be appreciated.
My master page simply calls container then header and nav and categories and footer.
The best CSS advice I can give if you have div issues is to look into YUI it is JUST css, so don't think it is some crazy new technology but it can be a huge help.
Watch this introductory video about it: http://video.yahoo.com/watch/1373808/4732784
The above video is a little dated but gives a good idea and the web is full of the required resources.
Add a clear:both; as your first div is floated left.