Help with choosing a layout for my design. Elastic layouts losing favour?
It’s been a long time since I did any CSS coding so I’m a bit rusty.
I’m working on a personal site at the moment and the basic layout is going to be 2 columns. The widest column will contain a further three columns for some of the text content. The narrowest column is going to house the main navigation and the logo. This navigation and logo needs to remain visible whenever the user scrolls down the page, preferably without using Javascript (I think it can be done with CSS alone). The column for the navigation and logo should ideally be a fixed width, with the main content column being flexible. Hopefully that made sense.
The overall page width needs to be constrained so that users with maximised browser windows is not going to get a weird layout or have the line length be too long. The user needs to be able to control the text size (so the text needs to scale according to the user’s set text size in the browser options) without breaking the layout.
So I’m thinking I should probably go with an elastic or a hybrid layout for this rather than fixed or fluid. But in Dan Cederholm’s Handcrafted CSS book, there is a chapter covering fluid grids which was written by another guy. This guy reckons that elastic layouts are losing favour. Has any of you guys got any idea why this might be? I’ve Googled but found nothing.
Etiketler: choosing, design, elastic, favour, for, help, layout, layouts, losing, my, with
A little help please
Hey guys, I’ve been installing wordpress today and have spent most of it installing my own theme. Its the first time I’ve really touched on CCS but I’ve managed to get it almost set-up.
My problem is I’m using css create to text columns, which worked fine unil when the second columns became to big and kept moving to the left.
I’m using these two in the css file, contentr is the one that’s spilling to the left. is there someone sort of fixing I can put on it so it just wraps the text?
Thanks for your time.
#content {
margin:0 220px 0 0 !important;
margin:0 220px 0 0;
border-right:1px solid #eee;
border-left:1px solid #eee;
padding:10px 25px 30px 25px;
}
#contentr {
margin:0 10px 0 0;
margin:0 10px 0 0;
float: right;
border-right:1px solid #eee;
border-left:1px solid #eee;
padding:10px 25px 30px 25px;
}
Css issue Mac vs PC
Hi To all
I am experiencing an display css issue .
I am working on the mac side of my computer. The file http://www.reesdynamic.co.za/top-fruit/team.php displays perfectly on the mac side. When I view the same file on the pc side in Firefox the right sider bar covers part of the menu.
I have used a reset.css file to make the pc and mac displays uniform in look.
If you view http://www.reesdynamic.co.za/top-fruit/index.html you will have the correct menu to navigate to the different pages. The index file displays correctly. I have used the same css style (adapting it for the different sidebar length). On most pages the display is uniform.
If you view http://www.reesdynamic.co.za/property-marketing.html
or http://www.reesdynamic.co.za/form.html
the same issue appears.
The team.html page I have set the height and removed the bottom padding thinking this was the issue, unfortunately it did not work.
I cant understand how some pages styled the same way , display perfectly on both pc and mac and others using the same syling don’t.
I am a bit lost as to what the issue on these three pages could be. I coded the bulk of the site on the pc side but have coded the last 3 pages using the mac side.
I would appreciate any advice.
Thanks for your time reading this post.
Position Fixed, able to scroll too?
I have an element which is fixed towards the bottom left of the browser but not at the very bottom about 3 quarters from the top.
Its fixed as i need it to stay there as you sideways scroll content behind it.
This all works fine apart from when you have a smaller browser size.
As its fixed and the page loads smaller you cannot scroll to it.
Is there anyway around this, as it needs to work the same in all browser sizes?
I fear not 
Safari Width issue – heeeelp ;)
Hi people,
I’m new to this forum – I have been stumped on this problem for a few days now and feel I need external help!!
In Firefox it’s fine.
In Safari 5.0 on a Mac it is showing a horizontal scrollbar as if the was like 1800px wide… and on IE it has a greyed out horizontal scrollbar
I have a feeling it is some CSS somewhere causing this to happen (margin / padding somewhere maybe?) but I can’t find it.
The “computed style” when I inspected the element of the shows width: 1846px; I don’t use safari much apart from cross-browser compatibility testing so not sure what “computed style” means. I assume it’s the calculated style of what I am looking at in that specific browser with my computer hardware, just an assumption – please correct if I am wrong.
Any help much appreciated – I have wasted enough time on this – hopefully it’s an easy one to fix.
Thanks in advance,
Mikey_c_9
z-index problem
I’m having a z-index problem on this page:
http://boxer.webventions.com/Portfolio
I’ve tried changing a z-index value on almost every element and can’t get it right.
Any ideas?
Thanks
E
A snippet of the css is below:
HTML4Strict Code:
/* Portfolio */
#wrapper .portfolio {
padding:12px;
}
.portfolio .col3,.portfolio .col1,.portfolio .col2{
width:795px;
margin-bottom:20px;
background:url(‘../assets/design/portfolio_boxes.png’) 0 top;
}
.portfolio .col2{
width:530px;
}
.portfolio .col1{
width:270px;
}
.portfolio .col3 .bottom_cap, .portfolio .col2 .bottom_cap, .portfolio .col1 .bottom_cap{
display:block;
position:relative;
top:15px;
height:15px;
background:url(‘../assets/design/portfolio_boxes.png’) 0 -645px;
}
.portfolio .column{
position:relative;
top:15px;
width:220px;
float:left;
padding:0px 18px ;
margin-right:10px;
z-index:99;
}
*html .portfolio .column{
width:200px;
margin:0;
}
#wrapper .portfolio .last{
margin-right:0px;
}
.go_button {
position:relative;
height:23px;
width:25px;
float:right;
margin:-5px 0 0 0;
}
.go_button span{
position:absolute;
top:0;
left:0;
height:23px;
width:25px;
background:url(‘../assets/design/sprites.png’) -517px -108px;
}
*html .go_button span{
background:url(‘../assets/design/sprites.gif’) -517px -108px;
}
.go_button:hover span{
background-position:-541px -108px;
}
.go_button:active span{
background-position:-567px -108px;
}
.portfolio h1 {
margin-bottom:10px;
}
.portfolio h2 {
text-transform:uppercase;
font-weight:normal;
color:#666;
margin-bottom:10px;
font-size:14px;
text-align:center;
margin-top:0;
padding-top:0;
}
.portfolio .text {
width:100px;
float:right;
font-size:10px;
color:#666;
}
.portfolio .thumb {
position:relative;
float:left;
width:100px;
}
.portfolio .images {
position:relative;
position:relative;
z-index:99;
}
.portfolio .popup {
position:absolute;
z-index:9999;
left:0;
top:0;
display:none;
}
Resource for checking unused CSS, and outputting "clean" file
Hello,
I know I used a website like this in the past, that will check your css file, and determine what classes/selectors are not used. I do realize dustme selectors does this, but i am looking for something that will OUTPUT the new css with the unused code REMOVED.
Anything coming to mind? I have a style sheet that is huge and it would take forever to go through by hand.
Thanks!
Etiketler: and, checking, css, file, for, outputting, quotcleanquot, resource, unused
Semantic floats?
I am experimenting with a fixed with, centered page design.
here’s where it gets tricky…
In the content , beneath the head section, I want a sub section that extends from the left ( or right) OF THE VIEW PORT and into the centered content area. It’s essentially a float that the main content wraps around.
This is where it gets TRICKIER.
I have achieved the above relatively easily. But in order to get the main content to float around this secondary content, as described, I had to put the sub section first in the source order… that just doesnt seem semantically right:leading off with a quote, aside.. or note, or is that something that is just the nature of floats and is thus forgiven by the semantics.
This is essentially what I am doing:
CSS
body, p, h1, h2, h3{margin:0; }
.center {width:800px; margin:0 auto;}
#page{ background:#000; color:#fff; }
#stick {background-color:rgba(255,255,255,.5); margin: 0 20px 20px 0;float:left; width:50%; min-height :150px; -moz-border-radius-topright:10px;-moz-border-radius-bottomright:10px;}
#main{background:#555; height:100%; min-height:400px;}
#stick p{ float:right; padding:10px 20px; width:360px;}
#main p {padding:0 20px 20px; 20px;}
#brand {background:#555;}
#brand * {padding:20px 20px 5px 20px;}
#brand *:last-child {padding-top:0;padding-bottom:20px;}
HTML:
Branding and stuff
some branding statement
Content..
More content..
Main content area… Main content area… Main content area… Main content area… Main content area… Main content area…
Main content area… Main content area… Main content area… Main content area… Main content area… Main content area…
Main content area… Main content area… Main content area… Main content area… Main content area… Main content area…
Main content area… Main content area… Main content area… Main content area… Main content area… Main content area…
is there a way to achieve this effect, but have #stick come AFTER #main in the source code? Keep in min that #stick is variable and unknown.
Boxes not showing as links
Hi,
Take a look at this page:
http://www.freemanholland.com/cow/public_html/
You will notice a series of boxes, some of which should link through to other pages. I viewed the source the html shows the box as links but i can’t click on the box?
It’s like its hidden underneath a layer or something?
Any ideas what it might be?
Thanks
Input box showing up in the middle in IE
Hi,
Take a look at this page in IE, it’s just a demo page to show you the problem i am facing.
http://www.prima.cse.salford.ac.uk:8…ew/testing.php
The search text is too far below the search button, any ideas why this is?
Thanks
