Questions about CSS.

D

duyen

New Member
Reaction score
214
Exide said:
Thanks.

I'm using iFrames. -Anything wrong with that? :p
Should I use tables together with iFrames?
Click to expand...

Tables are bad. The World Wide Web Consortium will come to your house with torches if you use tables for anything except displaying data.
 
Exide

Exide

I am amazingly focused right now!
Reaction score
448
I'm guessing I should not include tables, then? :p

Why won't my picture show all of the screen?

See the black border on this picture. I want the picture to reach all of the screen. (No black border.)
Like on this website:
http://www.kineticshadows.com/ -The loggo is fit to the screen.

Here's my code:
Code: 
<body bgcolor="black">

<div id="test">
</div>

Code: 
#test
{
 width: 100%;          [COLOR="Red"]//I don't know if this works..[/COLOR]
 height: 300px;
 background-image: url(Images/loggo3.png);
}
 
D

duyen

New Member
Reaction score
214
That kinetic shadows site's logo only fits to the screen because it is a bunch of layered background images.

Also comments in CSS are declared like this: /*Comment*/

If you want to know how to repeat a background image click here.

If you want to know how to repeat it only on 1 axis click here.
 
Exide

Exide

I am amazingly focused right now!
Reaction score
448
I tried this:
Code: 
<body background="Images/loggo3.png">
-That removed the border.
But I don't know what it with look like on other browsers and other resolutions..

EDIT: Also, the background picture repeats itself..

EDIT #2: I solved that by doing this:
Code: 
</head>

<style type="text/css">
body 
{ 
 background-image: url(Images/loggo3.png);
 background-repeat: no-repeat;
}
</style>


<body>
Don't know what others will think of that solution, though.. :p

>That kinetic shadows site's logo only fits to the screen because it is a bunch of layered background images.
Do you know /could you show me/ how to do this? :)
 
D

duyen

New Member
Reaction score
214
Exide said:
Do you know /could you show me/ how to do this? :)
Click to expand...

Well start with the bg:

Code: 
body
{
 background-image: blah; 
 background-repeat: no-repeat;
 [COLOR="Red"]/*Any other settings*/[/COLOR]
}

Then a div floating to the left:

Code: 
#topleft
{
 float: left;
 width: 200px; [COLOR="Red"]/*DO NOT SET THIS VALUE TO A %, SET IT TO THE IMAGE'S WIDTH!*/[/COLOR]
 background-image: blah;
 background-repeat: no-repeat;
 [COLOR="Red"]/*Any other settings*/[/COLOR]
}

Then a div floating to the right:
Code: 
#topright
{
 float: right;
 width: 200px; [COLOR="Red"]/*DO NOT SET THIS VALUE TO A %, SET IT TO THE IMAGE'S WIDTH!*/[/COLOR]
 background-image: blah;
 background-repeat: no-repeat;
 [COLOR="Red"]/*Any other settings*/[/COLOR]
}

You get the drift right?
 
Exide

Exide

I am amazingly focused right now!
Reaction score
448
Thanks.

Here's what it looks like now:

blah-2.jpg

I was wondering how to set a background where those red arrows are pointing. (The black part of the screen.)
Also, here's the code:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Work Factory</title>

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

<style type="text/css">
body 
{ 
 background-image: url(Images/loggo3.png);
 background-repeat: no-repeat;
}
</style>


<body bgcolor="#000000">

<div id="top">  </div>

<div id="container">

<div id="buttons"> Buttons </div>

<div id="center">

<br>
<iframe src="firstpage.html" name="center" width="80%" height="95%" marginwidth="10" marginheight="10" 

scrolling="auto" frameborder="0" allowtransparency="true">
</iframe>


</div>
</div>


</body>
</html>

Code: 
#container 
{
 width: 80%;
 margin: 2em 110px;
}

#top
{
 height: 265px;
}

#center
{
 height: 40em;
 text-align: center;
 background: #ABC999;
 opacity: 1; filter: alpha(opacity=100);
}

#buttons
{
 text-align: center;
 height: 4em;
 background: #999ABC;
}
-Would it matter much if the code is crap, but what people see looks ok?


EDIT:
Another question.

I want to use a menu for buttons, that opens the link in an iframe.
But these buttons changes colors, depending what side/link I am watching.

Here's the code:
Code: 
<div id="menycontainer">
 <ul>
  <li><a href="firstpage.html" id="current">Meny 1</a></li>
  <li><a href="secondpage.html">Meny 2</a></li>
  <li><a href="firstpage.html" target="center">Meny 3</a></li>
  <li><a href="secondpage.html" target="center">Meny 4</a></li>
  <li><a href="firstpage.html" target="center">Meny 5</a></li>
 </ul>
</div>
id="current" sets what page you are on.

Code: 
#menycontainer ul{margin-left: 0; padding-left: 0; float: left;	font: 70% Verdana, Helvetica, sans-serif;}
#menycontainer li{display: inline;}

#menycontainer ul a{float: left; background: #CC9999; text-decoration: none; margin-right: 0.5em; padding: 0.3em 

2em;}


#menycontainer a:link{color: #ffffff;}

#menycontainer a:visited{color: #ffffff;}

#menycontainer a:hover{background: #996666;}

#menycontainer a#current{background: #FFCC66; color: #000000;}

What happens is that I either have to change the whole page (and create 5 different pages).
Or use the iframe and the color won't work.

I want to use iframe with working colors. :p
 
D

duyen

New Member
Reaction score
214
>I was wondering how to set a background where those red arrows are pointing. (The black part of the screen.)
Also, here's the code:

Use float: left; and float: right; - Then repeat the background on the Y axis?

>I want to use a menu for buttons, that opens the link in an iframe.
But these buttons changes colors, depending what side/link I am watching.

You might need to add some JavaScript if your saying they're all dislayed on the same page - I can point you in the right direction if that's what you want.
 
Exide

Exide

I am amazingly focused right now!
Reaction score
448
Anman64 said:
Use float: left; and float: right; - Then repeat the background on the Y axis?

You might need to add some JavaScript if your saying they're all dislayed on the same page - I can point you in the right direction if that's what you want.
Click to expand...

1. Nah, the picture on the top is already the background. -I don't think I can have two backgrounds.

2. Here's an example: (Which I'm using.)
http://www.webdesignskolan.com/css-meny/exempel/menyexempel7/sida1.htm
-The thing about that is that each click updates the entire site. I just want to update the iframe and the buttons, if possible.
 
D

duyen

New Member
Reaction score
214
>Nah, the picture on the top is already the background. -I don't think I can have two backgrounds.

Yes you can - but no on the body.

>Here's an example: (Which I'm using.)
http://www.webdesignskolan.com/css-m...pel7/sida1.htm
-The thing about that is that each click updates the entire site. I just want to update the iframe and the buttons, if possible.

That changes the web page - and dosen't even use iframes.

But if you want to know how to do that you might want to look at my code for the buttons at http://www.rodead.com/rodead_forum/gamehall/

But as I was saying - to do that you would need to use JavaScript.
 
Exide

Exide

I am amazingly focused right now!
Reaction score
448
>Yes you can - but no on the body.
How? =)

>But if you want to know how to do that you might want to look at my code for the buttons at
Yea, that's how I want it.
I'd love to get some help on that. :)
 
D

duyen

New Member
Reaction score
214
>How? =)

Make a div over the background - then set the div's background-image to something else. Ta-da! 2 bg's.

>Yea, that's how I want it.
I'd love to get some help on that. :)

I'll getcha a script just hold on.

EDIT:

Alright - didn't get to test:

Put this in the head section:
Code: 
<script type="text/javascript">
var page(p)
function setpage(p)
{
page=p;
switch (page)
 {
 case 1:
   document.write('<iframe src="firstpage.html" id="current" name="center" width="80%" height="95%" marginwidth="10" marginheight="10"');
   break;
 case 2:
   document.write('<iframe src="secondpage.html" id="current" name="center" width="80%" height="95%" marginwidth="10" marginheight="10"');
   break;
 case 3:
   document.write('<iframe src="thirdpage.html" id="current" name="center" width="80%" height="95%" marginwidth="10" marginheight="10"');
   break;
 }
}
</script>

Then where your buttons are:

Code: 
<img src="firstbutton.png" onclick="setpage(1)">
<img src="secondbutton.png" onclick="setpage(2)">

Something like that.
 
Exide

Exide

I am amazingly focused right now!
Reaction score
448
Thanks.
But is it possible to change the color, not using pictures? (Like in the example code that I was using.)
 
Exide

Exide

I am amazingly focused right now!
Reaction score
448
EDIT:
I've decided to use pictures for buttons/links..

So now is that link you gave me, enouwee, a really cool option.
However, I can't get it to work. :( (Surprise!)

So here's what I did:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO 8859-1">
<title> </title>

<link rel="shortcut icon" href="images/favicon.ico">
<link href="divs.css" rel="stylesheet" type="text/css">

<style type="text/css">

	#examplenav {
		margin: 0;
		padding: 0;
	}
	#examplenav li {
		list-style: none;
		height: 35px;
		float: left;
		position: relative;
	}
	#examplenav li a {
		height: 35px;
		text-indent: -9000px;
		display: block;
	}
	#examplenav .current a { background-position: 0 -24px; }
	
	a#home,
	a#about,
	a#products,
	a#contact {
		width: 80px;
		height: 35px;
	}
	
	a#cities { background-image: url(images\button_home.png); }
	a#about { background-image: url(images/button_about.jpg); }
	a#contact { background-image: url(images/button_contact.jpg); }
	a#products { background-image: url(images/button_products.jpg); }
		
	a#home:hover,
	a#about:hover,
	a#contact:hover,
	a#products:hover
	{ background-position: 0 -35px; }

</style>

</head>

<style type="text/css">
body 
{ 
 background-image: url(images/loggo4.png);
 background-repeat: no-repeat;
 background-color: #000000;
}
</style>


<body>

<div id="top"> </div>

 <div id="container">

 <div id="center">

  <div id="buttons">


<div id="examplenavcontainer">
<ul id="examplenav">

<li title="Cities"> <a href="#" id="Cities"> Test </a> </li>

<li title="About" class="current"> <a href="#" id="about"> About </a> </li>
<li title="Products"> <a href="#" id="products"> Products </a> </li>
<li title="Contact"> <a href="#" id="contact"> Contact </a> </li>
</ul>
</div>

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>        [COLOR="red"]/* I don't know what this means */[/COLOR]
<script type="text/javascript">_uacct = "UA-901918-6";urchinTracker();</script>                  [COLOR="Red"]/* I don't know what this means */[/COLOR]
      

  </div>

  <br>
   <iframe src="iframe.html" name="iframe" width="85%" height="95%" marginwidth="10" marginheight="10"     scrolling="auto" frameborder="0" allowtransparency="true">
   </iframe>
 </div>
</div>


</body>
</html>

Most of the code is copied and pasted from that example (just to see if it would work at all). Sadly it didn't. :p
Um.. Help, please? :)
 
UndeadDragon

UndeadDragon

Super Moderator
Reaction score
447
Code: 
	a#cities { background-image: url(images\button_home.png); }

should be

Code: 
	a#cities { background-image: url(images[B]/[/B]button_home.png); }
 
Exide

Exide

I am amazingly focused right now!
Reaction score
448
Thanks, UndeadDragon. :)
New problem occured, though!

I can see half the picture (probably 'width' that is messing up somewhere..) in Google Chrome, but not in Internet Explorer.. :confused:
I'd like to see the whole picture in both browsers. :p
 
D

duyen

New Member
Reaction score
214
Exide said:
Thanks, UndeadDragon. :)
New problem occured, though!

I can see half the picture (probably 'width' that is messing up somewhere..) in Google Chrome, but not in Internet Explorer.. :confused:
I'd like to see the whole picture in both browsers. :p
Click to expand...

Chrome is fail fail since it's only been out so long.

Use FF, Opera or SeaMonkey.
 
Exide

Exide

I am amazingly focused right now!
Reaction score
448
Anman64 said:
Chrome is fail fail since it's only been out so long.

Use FF, Opera or SeaMonkey.
Click to expand...

OFFTOPIC: Chrome worked better than Internet Explorer.
I rather drink battery acid, than installing any of those on my computer. :rolleyes:

Any clues on what part of the code could be messing up my website?
-On that example website (from where I stole the code) it worked on IE.

EDIT: I managed to fix it! =)
Currently I have no further questions. (Don't worry, there will be more before I'm done!)
I know I will have questions about resolutions and using different browsers to view the website in the future.. So you might want to read up on that! :p
 
D

duyen

New Member
Reaction score
214
I don't read up on anything you asked so far lol :p

Got half this shit memorized.
 
Exide

Exide

I am amazingly focused right now!
Reaction score
448
Anman64 said:
I don't read up on anything you asked so far lol :p

Got half this shit memorized.
Click to expand...

That's rude, dude! :thup:

Ok, new question. :p
I almost got my meny's to work!
I'm tired, it's 1am here and I'm going to bed after asking this question, so it's probably me just missing some 'width: *;' in the code somewhere..
I figure I'd just ask anyway..

So I got five buttons now (just to test with, they all look the same anyway), which links to different pages (some aren't created yet, but nevermind..)
The problem is that the first button called 'cities' shows only about 20%, then it's "overlapped" (is that a word?) by the second button. (Meaning the first button is only partly visible. -All the other buttons looks fine, though..)

Here's the code: (I put the CSS in a .css file, for cleaner code.)

Code: 
<body>

<div id="top"> </div>

 <div id="container">

 <div id="center">

  <div id="buttons">

   <div id="menycontainer">
    <ul id="meny">

     <li title="cities"> <a href="iframe.html" target="iframe" id="cities"> Test </a> </li>
     <li title="About" class="current"> <a href="firstpage.html" target="iframe" id="about"> About </a> </li>
     <li title="Products"> <a href="#" target="iframe" id="products"> Products </a> </li>
     <li title="Contact"> <a href="#" target="iframe" id="contact"> Contact </a> </li>

    </ul>
   </div>
  </div>

 <br>
 <iframe src="iframe.html" name="iframe" width="85%" height="95%" marginwidth="10" marginheight="10"     

scrolling="auto" frameborder="0" allowtransparency="true">
 </iframe>

 </div>
</div>

</body>
</html>

Code: 
#meny 
{
 margin-left: 40%;
 padding: 0;
}

#meny li 
{
 list-style: none;
 height: 35px;
 float: left;
 position: relative;
}

#meny li a 
{
 height: 35px;
 text-indent: -9000px;
 display: block;
}

#meny .current a{ background-position: 0 -70px; }
	
 a#home,
 a#about,
 a#products,
 a#contact 
{
 width: 80px;
 height: 35px;
}
	
 a#cities { background-image: url(images/button_cities2.png); }
 a#about { background-image: url(images/button_cities2.png); }
 a#contact { background-image: url(images/button_cities2.png); }
 a#products { background-image: url(images/button_cities2.png); }
		
 a#home:hover,
 a#about:hover,
 a#contact:hover,
 a#products:hover
{ background-position: 0 -35px; }

As you can see, I'm using the same picture on all the buttons, but that's just for testing purposes..

Hope you can find the error for me. <3
Good night. :p
 
You must log in or register to reply here.
General chit-chat
Help Users
  • No one is chatting at the moment.
  • The Helper The Helper:
    The bots will show up as users online in the forum software but they do not show up in my stats tracking. I am sure there are bots in the stats but the way alot of the bots treat the site do not show up on the stats
  • The Helper The Helper:
    New recipe is Shipwreck Dinner - https://www.thehelper.net/threads/recipe-shipwreck-dinner.193511/
  • Varine Varine:
    I want to build a filtration system for my 3d printer, and that shit is so much more complicated than I thought it would be
  • Varine Varine:
    Apparently ABS emits styrene particulates which can be like .2 micrometers, which idk if the VOC detectors I have can even catch that
  • Varine Varine:
    Anyway I need to get some of those sensors and two air pressure sensors installed before an after the filters, which I need to figure out how to calculate the necessary pressure for and I have yet to find anything that tells me how to actually do that, just the cfm ratings
  • Varine Varine:
    And then I have to set up an arduino board to read those sensors, which I also don't know very much about but I have a whole bunch of crash course things for that
  • Varine Varine:
    These sensors are also a lot more than I thought they would be. Like 5 to 10 each, idk why but I assumed they would be like 2 dollars
  • Varine Varine:
    Another issue I'm learning is that a lot of the air quality sensors don't work at very high ambient temperatures. I'm planning on heating this enclosure to like 60C or so, and that's the upper limit of their functionality
  • Varine Varine:
    Although I don't know if I need to actually actively heat it or just let the plate and hotend bring the ambient temp to whatever it will, but even then I need to figure out an exfiltration for hot air. I think I kind of know what to do but it's still fucking confusing
  • The Helper The Helper:
    Maybe you could find some of that information from AC tech - like how they detect freon and such
  • Varine Varine:
    That's mostly what I've been looking at
  • Varine Varine:
    I don't think I'm dealing with quite the same pressures though, at the very least its a significantly smaller system. For the time being I'm just going to put together a quick scrubby box though and hope it works good enough to not make my house toxic
  • Varine Varine:
    I mean I don't use this enough to pose any significant danger I don't think, but I would still rather not be throwing styrene all over the air
  • The Helper The Helper:
    New dessert added to recipes Southern Pecan Praline Cake https://www.thehelper.net/threads/recipe-southern-pecan-praline-cake.193555/
  • The Helper The Helper:
    Another bot invasion 493 members online most of them bots that do not show up on stats
  • Varine Varine:
    I'm looking at a solid 378 guests, but 3 members. Of which two are me and VSNES. The third is unlisted, which makes me think its a ghost.
     +1
  • The Helper The Helper:
    Some members choose invisibility mode
     +1
  • The Helper The Helper:
    Latest Recipe is Garlic Parmesan Chicken https://www.thehelper.net/threads/recipe-garlic-parmesan-chicken.193575/
  • The Helper The Helper:
    I bitch about Xenforo sometimes but it really is full featured you just have to really know what you are doing to get the most out of it.
  • The Helper The Helper:
    It is just not easy to fix styles and customize but it definitely can be done
  • The Helper The Helper:
    I do know this - xenforo dropped the ball by not keeping the vbulletin reputation comments as a feature. The loss of the Reputation comments data when we switched to Xenforo really was the death knell for the site when it came to all the users that left. I know I missed it so much and I got way less interested in the site when that feature was gone and I run the site.
  • Blackveiled Blackveiled:
    People love rep, lol
     +1
  • The Helper The Helper:
    The recipe today is Sloppy Joe Casserole - one of my faves LOL https://www.thehelper.net/threads/sloppy-joe-casserole-with-manwich.193585/
  • The Helper The Helper:
    Decided to put up a healthier type recipe to mix it up - Honey Garlic Shrimp Stir-Fry https://www.thehelper.net/threads/recipe-honey-garlic-shrimp-stir-fry.193595/
  • The Helper The Helper:
    Here is another comfort food favorite - Million Dollar Casserole - https://www.thehelper.net/threads/recipe-million-dollar-casserole.193614/

      The Helper Discord

      Members online

      No members online now.
      Online now:
      332 (members: 1, guests: 331)

      Share this page

      Affiliates

      Hive Workshop NUON Dome World Editor Tutorials

      Network Sponsors

      Apex Steel Pipe - Buys and sells Steel Pipe.
      Top