CSS - Stop Designing For 800x600?

hey..

i have this design



where i need it to do this http://www.456bereastreet.com/lab/cssframes/

only in the orange field where there is a login form on the picture..

but i can't get it working.. so i am very stock..

plz help

Sorry if I'm being repetitive, this has been discussed before, but still there is something preventing me from making CSS boxes behave properly.

Everything has to do with stopping <TABLE> and starting <CSS>-based thinking. I mean, there shouldn't be so much magic and wonderdust as I trick myself into believe.

My problem is very simple;

I'd like the design to do the following:
[wrapper: full width, 5px padding all over]
[variable size image container, 2 px padding all over, staying on the left at all times]
[variable size text container, staying on the right at all times, stretching full width so it touches the image container]

Here's an example of the design:
Code:

------------------------
|      (wrapper)       |
||------||------------||
||image || text       ||
||------||------------||
------------------------

I thought I had it made when I read that you basically can look at creating a table based design as using a combination of DIV's and SPAN's, havind the DIV's being looked at as rows and SPAN's as columns/cells. But for some reason I can't seem to get the full grip out of it.

I've had *some* success with this, but I'm having horrible problems with making the text get to the top left of the container. It *always* stays at bottom left, no matter how I adjust my DIV's, SPAN's or properties of those. I can't seem to make the boxes have any actual "space"; when I add margin properties to either box, I can't locate it, it's as if the container isn't there. I can get the wrapper to behace though.

While I'm at it, is there some good, solid, documentation of how the boxes work and interact? I've read *alot* of different articles, looked at w3c, checked other peoples code (which actually have teached me the most), but I'd like to have some kind of resource that gives me the knowledge of "box modelling" to such an extent that I should be able to solve in not all but most problems, like this simple one.

Thanks for taking time to read through all this. I know it won't become a FAQ or rooted topic, but I'm hoping perhaps someone with the same problem as I have will benefit from this.

I am new to design but really doing my best to keep up with the big boys. I am trying to tweak my site on Wordpress to have a oversized, and fluid footer.

Long story short I want my site (sac247[dot]sacobserver[dot]com) to have a footer that looks like venturebeat[dot]com or mashable[dot]com. Can someone help me get started on how to break my colors out of the widget box?

hola.

1.i am looking for quick tutorials on how to cross-platform web design a page without using tables.

2. and why people dont like to use tables?

++thanks in advanced.
+ckill3r

Hi, Is it possible to make 3 different sites depending on the client browser medium? I have a flash site, that needs to be presented non-flash for the iphone, and another non-Flash site for the ipad.

Is there a way CSS can detect these 3 different browser mediums?

If so, then how?

thanks
-

Hi

I am trying to learn how to design and develop a website that has consistent behavior across browsers, browser window size and screen resolution.

What are the industry best practices for designing and developing such websites.

Your help is appreciated

Thanks

Hi all,

I was wondering if there was a way to stop an image stretching in all browsers.

I'm creating a gallery for my web page. I've got a load of thumbnails that when you click on one it will display the picture lower down on the page. This image is in a DIV with a set width.

The trouble is that some images could be small, some could be large.

Using CSS I've tried setting the width to something like the size of the containing DIV. This works great for large pics but stretches the smaller pics (obviously it would as I was specifing a width). I then tried max-width. Hurrah, in Firefox this works great. Of course, Internet Explorer being the pile of poop that it is, my images come out huge and throw off the layout.

is there an easy way to ensure that my small images stay small but my large images don't grow too large for both IE & Firefox using CSS?

If not I guess I'll use PHP to determine the image size and go from there.

imagine this set up, div floated left, div floated right, div in between. the middle div has text that wraps and expands the page to the required height. however in firefox, because it expands to the width of the entire page before wrapping, the middle div drops below the two floated divs. i cant fix it's width as it needs to expand to fill the middle width depending on the size of the browser (the left/rigtht floats have fixed width)

if i put one or both of the floated divs within the middle div the text then wraps around the floats and doesnt remain in a column, setting each floats height to 100% is unsatisfactory, adding a further text container div only reproduces the original problem.

so it's a 3 column problem, but also it isnt. going to have a sandwich and try to attack it again, looking for fresh ideas. ultimatley i might have to go back and use a big table. ouch!

edit: just to clarify, the left and right floats are fixed width and height, the middle div can change width to accomodate the browser width, and height to accomodate the text.

I have the code below that basically builds a css based horizontal menu; menu items are floated into the menu bar, then in the same menuvbar, a small search box follows (floated).
At this point I'd like to stop elements being floated, but IE7 has some troubles because it keeps floating the next element, regardless the clear:both or float:none issued.
No problem in FF 3.5 and Opera 9.64

Can someone help?

Just cut the following code and save in a document.htm and test with your favorit browser and IE7.

Code:

<!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>
<title>mytitle</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
@charset "utf-8";
/* static START */
body {
background:white;
color:#555;
font-family:Verdana,"BitStream vera Sans",Helvetica,Sans-serif;
font-size:12px;
}

h1, h2, h3, h4, h5, h6 {
font-weight:bolder;
letter-spacing:-0.05em;
font-family:Arial;
}

h1 {font-size:170%;}
h2 {font-size:160%;}
h3 {font-size:150%;}
h4 {font-size:130%;}
h5 {font-size:110%;}
h6 {font-size:100%;}

a:hover img.sided {
border-color:#A6A6A6;
}

a {
color:#2970A6;
text-decoration:none;
}

a:hover {
text-decoration:underline;
}

.fixed{
clear:both;
}

/* static END */

/* layout START */
#idwrapper {
padding:0px;
width:1200px;
}

#header {
width:100%;
margin-top:20px;
height:300px;
}

#content{
width:1020px;
}

#footer{
}

#bitmaplogo{
margin-left:20px;
background:url("http://farm1.static.flickr.com/37/112944254_3f5212215a.jpg") no-repeat left bottom;
height:100%;

}

#menu {
display:block;
font-family:Arial Black, Arial Black, Gadget, sans-serif;
font-weight:bold;
background-color: Khaki;
width: 1000px;
height: 33px;
text-align: left;
}

#menu a{
display: block;
text-decoration: none;
font-family: Verdana,"BitStream vera Sans",Helvetica,Sans-serif;
font-size:15px;
font-weight:bold;
color:black;
width:auto;
height: auto;
float: left;
display: inline;
margin-right: 1px;
background-color: Khaki;
padding: 5px 2% 8px 2%;
text-align:center;}

#menu a:hover {
color: white;
background-color: DarkKhaki;
background-repeat:no-repeat;
text-decoration:none;
}

#searchbox {
background-color: Khaki;
position:relative;
float:left;
clear:right;
height:33px;
width:350px;
}

#cse-search-box{
float:left;
padding:3px 10px;
}

#search-box-text{
float:left;
padding-left:8px;
/*padding-top: 5px ;*/
line-height:32px;
letter-spacing:-0.05em;
font-family: Verdana,"BitStream vera Sans",Helvetica,Sans-serif;
font-size:16px;
font-weight:bold;
color: DarkGray;
}

.cse-box-style{
height: 20px;
width: 250px;
}

/* header END */

.tgrow{
margin-top:5px;
width:100%;
}
.adboxyellow {
background:Khaki;
font-size:100%;
color:black;
font-weight:bold;
border:4px solid DarkKhaki;
text-align:center;
}
.adboxblu {
background:#8DC3E9;
font-size:100%;
color:white;
font-weight:bold;
border:4px solid #4C88BE;
text-align:center;
}

.spacer{
background:url(img/spacer.gif);
}

.box_left_padded{
width:300px;
height:252px;
float:left;
margin-right:5px;
padding: 5px 5px 5px 5px;
}

.box_left_unpadded{
width:300px;
height:252px;
float:left;
margin-right:5px;
}

.box_mid_big_unpadded{
width:500px;
height:252px;
float:left;
margin-right:5px;
}

.box_right_unpadded{
width:210px;
height:252px;
float:left;
}
</style>
</head>
<body>
<div id="idwrapper">
<div id="header">
<div id="bitmaplogo"></div>

<div id="menu">
<a href="/articles">Articles</a> <a href="/guides">Guides</a> <a href=
"/news">News</a> <a href="/join">JOIN!</a> <a href="/disclaimer">Disclaimer</a>
<a href="/sitemap">Sitemap</a>

<div id="searchbox">
<div id="search-box-text">
Search
</div>

<form id="cse-search-box" action="http://mydot.com/search-results/"
name="cse-search-box">
<input type="hidden" value="p" name="cx" />
<input type="hidden" value="FORID:9" name="cof" />
<input type="hidden" value="UTF-8" name="ie" />
<input class="cse-box-style" type="text" size="20" name="q" style="border: 1px solid rgb(126, 157, 185); padding: 2px; background: rgb(255, 255, 255) url(http://www.google.com/coop/intl/en/images/google_custom_search_watermark.gif) no-repeat scroll left center; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;" />
</form>
<script src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en" type="text/javascript">
</script>
</div>
<div class="fixed"></div>
</div>
<div class="fixed"></div>
</div>
<div class="fixed"></div>
<div id="content">
<div class="adboxblu" style="width: 1033px; height: 20px; line-height: 20px; margin-top: 7px;">
your text Here! test
</div>
<div class="row">
<div class="spacer" style="height: 7px;"></div>
<div class="box_left_unpadded">
<div class="adboxblu" style="width: 292px; height: 250px; line-height: 250px; margin-top: 0px;">
your text Here! test
</div>
</div>

<div class="box_mid_big_unpadded">
<div class="adboxblu" style=
"width: 492px; height: 250px; line-height: 250px; margin-top: 0px;">
your text Here! test
</div>
</div>

<div class="box_right_unpadded">
<div class="adboxblu" style=
"width: 202px; height: 250px; line-height: 250px; margin-top: 0px;">
your text Here! test
</div>
</div>

<div class="fixed"></div>

<div class="row">
<div class="spacer" style="height: 7px;"></div>

<div class="box_left_unpadded">
<div class="adboxblu" style=
"width: 292px; height: 250px; line-height: 250px; margin-top: 0px;">
your text Here! test
</div>
</div>

<div class="box_mid_big_unpadded">
<div class="adboxblu" style=
"width: 492px; height: 250px; line-height: 250px; margin-top: 0px;">
your text Here! test
</div>
</div>

<div class="box_right_unpadded">
<div class="adboxblu" style=
"width: 202px; height: 250px; line-height: 250px; margin-top: 0px;">
your text Here! test
</div>
</div>

<div class="fixed"></div>
</div>

<div id="footer"></div>
</div>
</div>
</div>
</body>
</html> 

Hi there,

I really want to not use tables as I want to embrace CSS. Though this problem is killing me as everything looks fine in IE but not in FF, which is never the case so need help.

I require a title (two sentences overlapping each other) to be aligned side by side with a image.

Basically i've got one image and two paragraphs in a container div, the paragraphs are positioned absolute but in FF the look as though they are being place relative ie bottom right of image?

My html file looks like:

<body>
<div id="MainContainer">
<div id="HeaderContainer">
<img src="images/logo.gif" alt="Opix UK" name="Logo"/>
<p id="Title1">Photo products for the contemporary home..</p>
<p id="Title2">or business!</p>
</div>
</div>
</body>

My CSS looks like:

body{
padding:0;
margin:0;
margin-top: 5px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-align:center;
}
div#MainContainer{
width: 960px;
text-align: left;
margin-left: auto;
margin-right: auto;
}
div#HeaderContainer{
border: 1px solid Blue;
font-size: 19px;
font-style: italic;
font-weight: bold;
}
p#Title1{
border: 1px solid Red;
color: #333333;
position: absolute;
left: 100px;
top: 5px;
z-index: 1;
}
p#Title2{
border:1px solid Red;
color: #0066CC;
position: absolute;
left: 450px;
top: 17px;
z-index: 2;
}

Any help much appreciated?

My navbar on the left is pushing down all of my content in the centre. I was wondering if its possible to offset it being pushed down. Im guesing it would be something like float: top (im ignorant!). Could someone please tell me the best way of doing this?

Here is my site: http://zombiemod.com/rm/nina2/main.php?g2_itemId=13

If you hover over, you can see the lines along from the menu pushing the content down. I would like it to sit on the top. I beleive the code for this section is this:

Code:

  <div id="main-image-container">
    {if $theme.imageCount > 0}
      <div id="slideshow-controls">
        <ul id="control-buttons">
    <li><button id="controls-left">
      <img src="{g->theme url="images/controls-left.png"}" alt="{g->text text="Left"}" />
      </button></li>
    <li><button id="controls-play">
      <img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Play"}" />
      </button></li>
    <li><button id="controls-right">
      <img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Right"}" />
      </button></li>
        </ul>
      </div>

    <div id="sliding-frame">
      <div id="loading">
    {g->text text="Loading Album..."}
      </div>

      <p><img src="{g->theme url="images/blank.png"}"
      alt="{g->text text="Main image placeholder"}" id="main-image" /></p>
    </div>

Sup all. Im trying to make a website but it keeps resizing when I expand and retract me webbrowser. So Far this is my code


PHP Code:
<!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=utf-8" />
<title>Free UFC PPV</title>
    <style type="text/css">
        body
        {
            background-color: #CCC;
            font-family: Tahoma;
        }
        #holder
        {
            width: 75%;
            padding: 10px;
            border: 1px solid;
            text-align: left;
        }
        #img{
            background-image:url(images/header.png);
        }
        #login
        {
            width: 100%;
            font-family: Tahoma;
            font-size:15px;
            text-align: right;
            color: Black;
            border: 1px solid;
        }
    </style>
</head>

<body>
    <center>
        <div id="holder" style="width:75%">
            <a href="index.php">
            <img src="images/header.png" alt="Header Image" width="1024" height="150" /></a>
            <div id="login" style="100%" >
                <form action="">
                    Login:<input name="userlog" type="text" />
                    Password:<input name="passlog" type="text" />
                    <input name="btn_sub" type="button" value="Login" />
                </form>
          </div>
        </div>
    </center>
</body>
</html> 





What can I do to stop resizing?

Hey guys,

So i'm working on the site www. paulfenton .tk.

My problem occurs when you click on one of the categories in the sidebar or go to an individual post by clicking on the title... a horizontal scrollbar seems to come up. when it shouldnt.

if you use the mouse wheel inside the content region, you can see that the content is scrolling a little bit horizontally. I woudld like to stop this or fix the cause but I cant figure out how...

Also, if you click and drag downwards as if you were trying to select everything on the page, the page scrolls below the bottom border.. it is not supposed to do this since I turned off overflow.

Any help or ideas would be great, let me know if you have any questions.

-Paul

I have a div centered in the middle of my page if i type a long paragraph between the two <div> tags it is all one line, and resizes the div, even though i have its width set to a fixed size? is there something im doing wrong? Im completely stumped

thanks in advance