call the media - my css is wrong!

Dapandyman · #1 (**permalink**) Feb 14th, 2007, 18:44

not for the first time, eh?
i am putting a 'news box' on my website but i cant seem to position it correctly - the code might be slightly confused after my meddling to try and fit the box in but all in all my code is valid
i have a sneaky feeling it has something to do with the display of #news ?
ill have a tinker and post any progressions
also i still have positioning problems of my navbar across ff and ie/opera
any help would be greatly appreciated
Thanks,
Dapandyman

karinne · #2 (**permalink**) Feb 14th, 2007, 18:58

Right and ... so ... got a link?

Dapandyman · #3 (**permalink**) Feb 14th, 2007, 19:02

lmao im so dumb - i forgot
CSS
Page
lol im very sorry for my retardedness...

Antwan · #4 (**permalink**) Feb 15th, 2007, 08:09

I'm really impressed with your coding mate, it's come on leaps and bounds since when your first started!

If the content and the news box are to be side by side would it not be easier if you floated the content to the left and floated the news box to the right? Then your footer could clear both. Just spitballing ideas here

Antwan · #5 (**permalink**) Feb 15th, 2007, 08:28

I've been footering around with your code and it's fixable but I'm not sure if my ways better. I've not got it fully fixed yet but when I do i'll post the code up for you and you can compare to see and decide if you want it done that way.

Antwan · #6 (**permalink**) Feb 15th, 2007, 08:52

Theres how I would basically do it, theres a hell of a lot more tweaking to be done there but thats just to show you the basic basic sort of method i'd have used, copy that into a new page and compare. I changed lots of widths just for testing so you'll have to resize the content and news and new container I made to get it to the size you want, tell me what you think and if it's at all useful!

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
* {margin: 0; padding: 0;}

body
{
    margin: 0; padding-top: 50px;
    background-color: #444;
    font-family: verdana;
}

h1
{
    font-family: lucida sans;
    font-size: 300%;
    padding: 30px 0 0 20px;
}

h2
{
    padding: 30px 0 10px 10px;
}

h3
{
    padding: 10px 0 5px 10px;
}

h4
{
    padding: 0 0 5px 10px;
}

p
{
    padding: 0 0 15px 5px;
}

.orange
{
    color: #f60;
}

.content
{
    background-color: #ccc;
    color: #000;
    margin-left: 2%;
    padding-bottom: 10px;
    width: 600px;
    float: left;
}

.copyright
{
    padding: 0 0 5px 5px;
    font-size: 70%;
    clear: both;
}

#news
{
    background-color:#222;
    float: left;
    color: #f60;
    width: 200px;
    height: 250px;
    margin: 25px 10px 10px 0;
    padding: 5px 5px 10px 5px;
}

#navcontainer ul
{
    display: block;
    padding-left: 0;
    margin: 1% 20% 0 0%;
    background-color: #222;
    color: #c60;
    float: left;
    width: 1000px;
    font-family: arial, helvetica, sans-serif;
}

#navcontainer ul li 
{
    display: inline;
}

#navcontainer ul li a
{
    padding: 0.2em 1em;
    background-color: #222;
    color: #f60;
    text-decoration: none;
    float: left;
    border-right: 1px solid #fff;
}

#navcontainer ul li a:hover
{
    background-color: #000;
    color: #f10;
}

#bigcontainer {
width: 1000px;
margin: auto;
background-color: #ccc;
}


</style>
</head>

<body>
       <div id="bigcontainer">
       <h1><span class="orange">Illuminous</span> Design</h1>
       <div id="navcontainer">
       <ul id="navlist">
       <li id="active"><a href="http://www.freewebs.com/testurl/" id="current">Home</a></li>
       <li><a href="http://www.freewebs.com/testurl/portfolio/">Our Portfolio</a></li>
       <li><a href="http://www.freewebs.com/testurl/about/">Articles</a></li>
       <li><a href="http://www.freewebs.com/testurl/contact/">Get in Touch</a></li>
       </ul>
       </div>
       
       <div class="content">
      
       <h2>Our Aims:</h2>
       <p>
             - To create clean-coded, quick, simple and good looking <br/> websites for practical use <br/>
             - To give 100% support to all our customers <br/>
             - To be cost effective and cheaper than other market <br/> competetors <br/>
             - To combine our ideas with yours in order to create the ideal <br/> product for your needs <br/>
       </p>
       </div>
       <div id="news">

       <h3>News</h3>
       <h4>Recent News</h4>
       <p>Website Launched!</p>
       <h4>Last Week's news</h4>
       <p>Design Under Way!</p>
       </div>

       <p class="copyright">Copyright (c) 2007 - Andrew Arnett - Illuminous Design Ltd.</p>
       </div> 
</div>
</body>
</html>

Dapandyman · #7 (**permalink**) Feb 15th, 2007, 10:15

thanks a lot fo all you comments and help - it seems to have worked!
i just need to have a litte tamper and it should be sorted. I'm working on the ie fix as we speak
thanks,
Dapandyman

Dapandyman · #8 (**permalink**) Feb 15th, 2007, 10:37

i have it to my personal liking in FF, Opera works too but guess who's decided to be a rebel? IE of course. The layout is totally screwed up there - in your original code the newsbox was correctly positioned but after my (minor) tweaking IE has totally killed the page.
(This was also in your code Antwan) It seems that the 'bigcontainer' is present and has boundaries in IE but the colour just spreads to the far right - IE is spawn of the devil as everyone here knows but this should but fixable, right?
Here is the tweaked code:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
* {margin: 0; padding: 0;}

body
{
    margin: 0; padding-top: 50px;
    background-color: #444;
    font-family: verdana;
}

h1
{
    font-family: lucida sans;
    font-size: 300%;
    padding: 30px 0 0 20px;
}

h2
{
    padding: 30px 0 10px 10px;
}

h3
{
    padding: 10px 0 5px 10px;
}

h4
{
    padding: 0 0 5px 10px;
}

p
{
    padding: 0 0 15px 5px;
}

.orange
{
    color: #f60;
}

.content
{
    background-color: #fff;
    color: #000;
    margin-left: 2%;
    padding-bottom: 10px;
    width: 600px;
    float: left;
}

.copyright
{
    padding: 0 0 5px 5px;
    font-size: 70%;
    clear: both;
}

#news
{
    background-color:#222;
    float: right;
    color: #f60;
    width: 200px;
    height: 250px;
    margin: 25px 10px 10px 0;
    padding: 5px 5px 10px 5px;
}

#navcontainer ul
{
    display: block;
    padding-left: 0;
    margin: 1% 20% 0 0%;
    background-color: #222;
    color: #c60;
    float: left;
    width: 850px;
    font-family: arial, helvetica, sans-serif;
}

#navcontainer ul li 
{
    display: inline;
}

#navcontainer ul li a
{
    padding: 0.2em 1em;
    background-color: #222;
    color: #f60;
    text-decoration: none;
    float: left;
    border-right: 1px solid #fff;
}

#navcontainer ul li a:hover
{
    background-color: #000;
    color: #f10;
}

#bigcontainer 
{
width: 850px;
margin: auto;
background-color: #fff;
}


</style>
</head>

<body>
       <div id="bigcontainer">
       <h1><span class="orange">Illuminous</span> Design</h1>
       <div id="navcontainer">
       <ul id="navlist">
       <li id="active"><a href="http://www.freewebs.com/testurl/" id="current">Home</a></li>
       <li><a href="http://www.freewebs.com/testurl/portfolio/">Our Portfolio</a></li>
       <li><a href="http://www.freewebs.com/testurl/about/">Articles</a></li>
       <li><a href="http://www.freewebs.com/testurl/contact/">Get in Touch</a></li>
       </ul>
       </div>
       
       <div class="content">
      
       <h2>Our Aims:</h2>
       <p>
             - To create clean-coded, quick, simple and good looking <br/> &nbsp &nbsp websites for practical use <br/>
             - To give 100% support to all our customers <br/>
             - To be cost effective and cheaper than other market <br/>  &nbsp &nbsp   competetors <br/>
             - To combine our ideas with yours in order to create the ideal <br/>   &nbsp &nbsp  product for your needs <br/>
       </p>
       </div>
       <div id="news">

       <h3>News</h3>
       <h4>Recent News</h4>
       <p>Website Launched!</p>
       <h4>Last Week's news</h4>
       <p>Design Under Way!</p>
       </div>

       <p class="copyright">Copyright (c) 2007 - Andrew Arnett - Illuminous Design Ltd.</p>
       </div> 
</div>
</body>
</html>

I hate IE

Antwan · #9 (**permalink**) Feb 15th, 2007, 10:54

Sorry mate just to clarify, did the code I give you work correctly both in IE and in FF ? Or was it broken in IE after you tampered?

Edit: I just copied your tweaked code into a page and viewed it in IE7 and it seems fine?

Dapandyman · #10 (**permalink**) Feb 15th, 2007, 11:32

neither of them worked in my ie but im sure that mine is IE6 i never bothered to download 7 on my new laptop because I hate the whole IE concept but seeing as ill be testing all my sites in it i might as well - sorry for the confusion and yes both codes were wrong in IE6

Antwan · #11 (**permalink**) Feb 15th, 2007, 11:33

Can you give me a screenshot of what it looks like in IE6 because I don't use it anymore, I'm a firefox boy with a backup browser of IE7 :P

moojoo · #12 (**permalink**) Feb 15th, 2007, 15:44

get IETab.

Antwan · #13 (**permalink**) Feb 15th, 2007, 17:09

Quote:

Originally Posted by moojoo

get IETab.

I already use it mate. I've got a thread of firefox extensions somewhere on the forums and you suggested Firebug to me which is great by the way. But IETab only renders it using whatever engine of IE is on your machine, so if you've got ie7 it'll use the ie7 engine to render the page, or so i believe

karinne · #14 (**permalink**) Feb 15th, 2007, 17:29

You can install previous version of IE from here

moojoo · #15 (**permalink**) Feb 15th, 2007, 18:08

That is why I have standalone versions of 4 through 5.5 IE 6 default and standalone IE 7. =)

Dapandyman · #16 (**permalink**) Feb 15th, 2007, 20:59

heres the screenshot of ie6:
ie6_grr.jpg

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
[solved] Don't know what to call it	acrikey	Webforumz Cafe	3	Mar 24th, 2008 18:45
what do I call this 'some impovement?'	geyids	Webforumz Cafe	11	Jul 8th, 2007 10:56
Online Planner/Buyer /Digital Media/Search/Campaigns/Affiliate/ SEO/PPC/Mobile/Media	Web JobBot	Job Opportunities	0	Jan 10th, 2007 15:12
Online Traffic Manager/Digital Media/Search/Campaigns/Affiliate/ SEO/PPC/Mobile/Media	Web JobBot	Job Opportunities	0	Jan 10th, 2007 15:12

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
call the media - my css is wrong!