Skip to content
View in the app

A better way to browse. Learn more.
Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

CSS Link Issue

goldfingerler
in Frontend

Featured Replies

i am having trouble linking my style sheet.

 

@charset "utf-8";

/* CSS Document */

 

.banner{background-color:#0000CC;height:250px;width:800px;margin-left:auto;margin-right:auto;}

 

this is my style sheet.

 

<div class="banner"></div>

 

the banner isn't showing up.

 

any thoughts? thanks all.

have you got a live example we can look at? i don't see anything wrong with the css there.

It won't show up unless there is actually some content in the DIV mate

  • Author

i have this in my heading.

 

<link href="css/styles.css" rel="stylesheet" type="text/css" />

 

i have this in my css.

 

.banner{background-color:#0000CC;height:250px;width:800px;margin-left:auto;margin-right:auto;}

 

i have this in my index.

 

<div class="banner"><p>q</p></div>

 

the p is showing up on colorzilla, but no banner. i cant figure out y its not showing on the front end.

 

thought? thanks.

try removing margin-left:auto;margin-right:auto;

 

Do you have a live example? It could be conflicting elements, or inherited properties amongst other things.

  • Author

what do you mean live example? im working on my site, www.changemyworkout.com, above the buttons should be a banner with the qualifications as specified in my css. when i put the styles straight into the index it works, but when i put it in css it doesnt seem to link. i cant figure it out :/

Is your css where your link says it is? In a folder called css?

Or is it in the main folder with your html page?

 

Just a thought - I've done that before - DOH!

I've just had a look at your page and it looks like you've mixed your css and html in the css file.

You also have a lot of inline (in your html) css as well as separate.

 

Might be worth separating it all out into one file and then you will be able to access one without disturbing the other.

 

I think a look at http://htmldog.com/ might help; you have some idea of the languages but you seem a bit muddled at the moment.

 

I hope you don't mind me saying that and I hope this helps. :)

Try replacing:

 

<link href="css/styles.css" rel="stylesheet" type="text/css" />

 

With:

 

<link href="../css/styles.css" rel="stylesheet" type="text/css" />

 

Because I think that it is unable to find the CSS file, which is why nothing of the CSS is based.

 

So overall this should be how it is set out:

 

HTML Page:

 

<!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=iso-8859-1" />
<title>Your Page</title>
<link href="../css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="banner"><p>q</p></div>
</body>
</html>

 

CSS file

 


@charset "utf-8";
/* CSS Document */

.banner{
background-color:#0000CC;
height:250px;
width:800px;
margin-left:auto;
margin-right:auto;
}

 

If that doesn't work then I will have to have another look, good luck!

  • Author

still a no go. ive tried everything i can think of. right now i have a <p>q</p> inside the div banner, and as you can see the <p> is showing up on the site, but still no banner. i cant wait for this to be something really miniscule lol. thoughts? thanks.

Check the link to your stylesheet, because I can't find it anywhere lol

  • Author

here is my index.

 

<!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 href="css/styles.css" rel="stylesheet" type="text/css" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Change My Workout</title>

</head>

<body style="background-color:#000000">

<div class="banner"><p>q</p></div>

<div class="buttons" style="background-color:#FFFFFF;height:100px;width:800px;margin:0 auto;margin-top:20px;">

<div class="button1234" style="background-color:#0000CC;height:50px;width:800px;">

<div class="button1" style="background-color:#0099FF;height:40px;width:190px;float:left;margin-left:5px;margin-top:5px;"><img src="buttonbackground.jpg" /></div>

<div class="button2" style="background-color:#0099FF;height:40px;width:190px;float:left;margin-left:10px;margin-top:5px;"><img src="buttonbackground.jpg" /></div>

<div class="button3" style="background-color:#0099FF;height:40px;width:190px;float:left;margin-left:10px;margin-top:5px;"><img src="buttonbackground.jpg" /></div>

<div class="button4" style="background-color:#0099FF;height:40px;width:190px;float:left;margin-left:10px;margin-top:5px;"><img src="buttonbackground.jpg" /></div>

</div>

<div class="button5678" style="background-color:#0000CC;height:50px;width:800px;">

<div class="button5" style="background-color:#FFFFFF;height:40px;width:190px;float:left;margin-left:5px;margin-top:5px;"><img src="buttonbackground.jpg" /></div>

<div class="button6" style="background-color:#FFFFFF;height:40px;width:190px;float:left;margin-left:10px;margin-top:5px;"><img src="buttonbackground.jpg" /></div>

<div class="button7" style="background-color:#FFFFFF;height:40px;width:190px;float:left;margin-left:10px;margin-top:5px;"><img src="buttonbackground.jpg" /></div>

<div class="button8" style="background-color:#FFFFFF;height:40px;width:190px;float:left;margin-left:10px;margin-top:5px;"><img src="buttonbackground.jpg" /></div>

</div>

</div>

<div class="homecontent" style="background-color:#0000CC;height:700px;width:800px;margin:0 auto;margin-top:20px;"></div>

</body>

</html>

 

here is my css.

 

@charset "utf-8";

/* CSS Document */

 

.banner{

background-color:#0000CC;

height:250px;

width:800px;

margin-right:auto;

margin-left:auto;

}

 

the css file is names styles.css and its in a folder names css, so i don't know why the link is wrong. im putting this all out there now since i just haven't been able to figure it out, even with all the helpful replies.

 

any reason why the banner won't show?

 

the site is on www.changemyworkout.com

 

thanks everyone.

Are you sure that it IS a css file. What I mean is that in windows, you can name a txt file "myfile.css" and it will still be a txt file. Make sure that the extension is css and not txt or something. It's happened to me several times on windows before.

 

Hope I helped.

  • Author

yesss. i brought the styles out of the css folder.

 

.banner{background-color:#0000CC;height:250px;width:800px;margin-right:auto;margin-left:auto;}

.buttons{background-color:#FFFFFF;height:100px;width:800px;margin:0 auto;margin-top:20px;}

.button1234{background-color:#0000CC;height:50px;width:800px;}

.button1{background-color:#0099FF;height:40px;width:190px;float:left;margin-left:5px;margin-top:5px;}

.button2{background-color:#0099FF;height:40px;width:190px;float:left;margin-left:10px;margin-top:5px;}

.button3{background-color:#0099FF;height:40px;width:190px;float:left;margin-left:10px;margin-top:5px;}

.button4{background-color:#0099FF;height:40px;width:190px;float:left;margin-left:10px;margin-top:5px;}

.button5678{background-color:#0000CC;height:50px;width:800px;}

.button5{background-color:#FFFFFF;height:40px;width:190px;float:left;margin-left:5px;margin-top:5px;}

.button6{background-color:#FFFFFF;height:40px;width:190px;float:left;margin-left:10px;margin-top:5px;}

.button7{background-color:#FFFFFF;height:40px;width:190px;float:left;margin-left:10px;margin-top:5px;}

.button8{background-color:#FFFFFF;height:40px;width:190px;float:left;margin-left:10px;margin-top:5px;}

.homecontent{background-color:#0000CC;height:700px;width:800px;margin:0 auto;margin-top:20px;}

 

sooooo much cleaner, thanks for sticking with me everyone, i guess this is a nice welcoming to the life of a coder, i better get used to it :)

Create an account or sign in to comment
Go to topic listing

Account

Navigation

Search

Search

Configure browser push notifications
Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.