All Discussions - CSS-Tricks Forums

CSS positioning

margaux — Tue, 01 Nov 2011 16:59:15 -0400

trying to get to grips with CSS positioning. I've included the css and html below. My questions are 1. why is the nav wrap div not wholly contained within the header wrap div and sitting to the right of the logo at the same height? and 2. why is the footer list not contained within the footer div? Thanks

html







Weaving Wonderful Websites






Site Wrapper

	Header Wrap

		logo

		


		Nav Wrap

			 Nav List
				about

				portfolio

				contact

			

		

	



	
			
        
				

				

			


	


	
			 
				copyright

				site by

				contact

css

*/

*   { margin: 0; padding: 0; }

p {font-size:36px;}

body {
	font-family: sans-serif;
	color:#B26FA7;
}


a, a img { border: 0; text-decoration: none; }

#siteWrapper {
/*	background:url(images/bar.jpg) repeat-x;*/
	padding:30px 0 0 20px;
	min-width:1000px;
	border: 2px solid black;
}


/* ---------------------- header ----------------------- */	
#headerWrap {
		width:1000px;
		padding-bottom:80px;
		border: 1px solid black;
}
		
#logo {
	width: 600px;
	height: 182px;
	border: 1px solid black;
}

/* ---------------------- navigation ----------------------- */

#navWrap {
		position:relative;
		float:right;
		margin:35px 0 0 20px;
		border: 2px solid red;
		width:350px;
		height:200px;
}

#nav {
	text-decoration: none;
	list-style: none;
	border: 2px solid green;
}

#nav li {	
		display:inline;
		font-size:20px;
		margin-left:15px;
		border: 1px solid black;
}

#nav li a, #emailLink a {
	color:#f4847f;	
	text-decoration:none;
}

#nav li a:hover, #nav li a:active, #emailLink a:hover, #emailLink a:active {
	color:#ccc;
	font-style:italic;
}

/* ---------------------- portfolio content ----------------------- */

#portfolioWrap {
	border: 2px solid purple;
		float:left;
		width:680px;
		color:#F66;
		font-size:14px;
		padding:50px 0px 0px 20px;
		margin-left:4px;
}

	

/* ------------------------------- footer -------------------------- */	


#footer {
	border: 2px solid blue;
	width:900px;
	color:#F66;
	margin-top:400px;
	clear:both;
}

#footer ul {
	float:right;
	list-style: none;	
	width:400px;
}

#footer li {
		display:inline;
		font-size:16px;
		padding-right:34px;
		text-align:left;
		text-decoration:none;
}

#footer ul a {	
	text-decoration:none;
}

Uploaded date

JeyPey — Sun, 30 Oct 2011 17:24:51 -0400

Hello Guys i use this http://css-tricks.com/snippets/php/display-styled-directory-contents/
to show my files. Is there a way the replace "type" with "date". So it show you the date when the file appeared/uploaded in this folder?

Menu semantics question

hero — Tue, 01 Nov 2011 12:31:22 -0400

Can a menu contain a header or footer if I am working with multiple menus in a section. I do not want to put it on the encompassing section because they belong to the menu but want to make sure its good semantics.

For the life of me I can't find this slider/fader. Help?

noahgelman — Tue, 01 Nov 2011 13:51:57 -0400

I know of a slider, but I can't find it. It has a fade in/out content option and it auto-resizes to the new content. You also able to have multiple ones on a page.

Anyone have any idea of a slider/fader like that?

Need help with understanding placehold.it

chanman — Tue, 01 Nov 2011 15:23:01 -0400

I don't really get how to useplacehold.it can somebody help me with it.

IE9 Cufon?

allenc — Mon, 24 Oct 2011 17:26:56 -0400

I think this has been hindering me for a while but I just noticed it.. Is there any specific reason my cufon replaced headings disappear in IE9 i tried

but it doesnt seem to have any effect.

Thanks for any help.

TypeKit vs Google Web Fonts

gno — Thu, 24 Feb 2011 09:24:29 -0500

Hi guys,

I have been looking at both TypeKit and Google Web Fonts API recently. I must say that I like the google one a lot more. And it even seems to be free.

I would be glad if some of you could shed some light upon this - give a few pros and cons for each service.

The only thing I like more about typekit is the size of their font archive. :-)

how to build a slide down page content?

bhuten — Mon, 31 Oct 2011 20:01:08 -0400

I am wondering how to incorporate a smooth slide down content like this one on CSS Tricks : http://css-tricks.com/snippets/

UI Framework/Technology which supports all the borwsers evenly

Maverick — Tue, 01 Nov 2011 02:20:29 -0400

I am working on JSF and am responsible to design a website which supports all the browsers and OS combination's.

I have a working website which is pretty ok with most of the browser-OS combination's, but some issues related to alignment of buttons and other things keep on pop up for Browser modes and Documents Modes for Latest IE versions(8+). Some times i get problems with MAC+SAFARI too.

Is there any such framework or technology which will help to get similar look alike responses from all the browser OS combination's?

using localStorage to store css

fishnfrogs — Tue, 01 Nov 2011 12:38:45 -0400

Hi everyone. I was thinking about storing my global css in the localStorage -- if available. I suppose the same could be done with javascript as well. Does anyone have any insight into this? Thanks

text and centered images not scaling down help please

gearhead — Tue, 01 Nov 2011 14:03:06 -0400

I've a fluid (sort of) header, two column, footer layout in which I've images and text. When varying the browser width or height the text and images remain at the same sizes, not scaling up or down. Funny thing only the first image in one of the containers that sits on top of it and uses 100% of the container (div) scales up or down.

The column on the right does the same. Even after some experimentation reduced the images size, centered them in the column and...tadaaaa they resize!

Well the text and images below the container's-100%-width image remain the same size, as well the header (also an image) with images within the same for the footer, no rescaling.

Help please!!

Thanks to anyone, your help will be appreciated.

Corporate site redesign

Burminsky — Tue, 01 Nov 2011 04:02:36 -0400

Hello!

We have just changed the design and logo of our corporate website - pdgroup.co. On the front page we embedded a picture of our office room and in the center you can see a red button. If you press on it - the room changes a little some new things appear (jacuzzi, mirror ball and poster). What do you think of that? It looks funny, but we don't want visitors to think that we have fun instead of doing our work. Should we keep it there, or it is better to remove it? And what do you think of the whole design and navigation of the site?

Thanks for your help in advance.

mobile-first approach

cssnew — Tue, 01 Nov 2011 09:10:29 -0400

can anybody enlighten me about this mobile-first..how is it done? pros, cons???
What's the difference from the designing for desktop down to mobile using media queries, isn't it just the same?

@media print

krysak4ever — Tue, 01 Nov 2011 08:36:42 -0400

MEDIA QUERIES

I use single .css file in which I have apart all web styling at the very bottom also


@media print {
/* print styles in here */
}

I know media queries as for adaptive / responsive webs
but is this also MQ so I have to use modernizer or such in order to print in older browsers ?

Bootstrap + LESS

krysak4ever — Mon, 31 Oct 2011 04:38:36 -0400

hi,

I worked with 960.gs http://grids.heroku.com/
looks so messy compared to http://twitter.github.com/bootstrap/

bootstrap is using LESS
http://lesscss.org/#-client-side-usage

to generate its CSS in the first place

in bootstrap there are .less files

scaffolding.less

// GRID SYSTEM
// -----------
// To customize the grid system, bring up the variables.less file and change the column count, size, and gutter there

variables.less

// Griditude
// Modify the grid styles in mixins.less
@gridColumns:       16;
@gridColumnWidth:   40px;
@gridGutterWidth:   20px;
@extraSpace:        (@gridGutterWidth * 2); // For our grid calculations
@siteWidth:         (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

ok so far understand it
need it change it as follows

@gridColumns: 20;
@gridColumnWidth: 30px;
@gridGutterWidth: 20px;

but how can I "render it / convert it" into normal .CSS using the less.js file ?
http://lesscss.org/#-client-side-usage

IE and Firefox Issues with Vertical Navigation Bar

jonbooster — Mon, 31 Oct 2011 18:22:47 -0400

Hi,

I just created metallicatshirts.com and I am having trouble with the left hand vertical navigation menu in Internet Explorer and Firefox. After each link is clicked while using IE and Firefox, the list element shifts to the right and the navigation bar does not look consistent. This does not happen when I use Chrome and Safari and I get what I want. From doing some research on-line, I believe it may be the a:visited CSS rule in my CSS file that is causing the problem but I am not sure. I am not sure how to adjust this CSS code to accommodate IE and Firefox. Below is my CSS rules for the navigation bar. Any suggestions are much appreciated.

Thanks.

.ulNavBarVertical {
/* position:relative; */
padding:0;
margin:0;
width:0;

}
.ulNavBarVertical li {
list-style-type:none;
margin:0 0 0.25em 0;

}
.ulNavBarVertical a, .ulNavBarVertical a:visited {
position:relative;
display:block;
width:143px;
/*border:1px solid #333333;*/
font-family:Verdana, Helvetica, Arial, sans-serif;
font-size:11px;
text-align:left;
text-decoration:none;
/*background:#107AC0; */
color:#333333; /* ADDED */
padding-top: 0.25em;
padding-left: 5px;
padding-bottom: 0.25em;

/*padding:5px; */
}

.ulNavBarVertical a:hover {
color:#107AC0;
background-color: #FFFFFF;
background-image: none;

}
.ulNavBarVertical a span {
display:none;

}
.ulNavBarVertical a:hover span {
display:block;
position:absolute;
left:70px;
top:0;
text-align:left;
padding:0.5em;
width:24em;
background-color:#FFFFFF;
color:#333333;
border:1px solid #107AC0;

}
.ulNavBarVertical img {
border:1px solid #000;
float:left;
margin:0.25em 1em 0.5em 0;

}
.ulNavBarVertical a:hover span:first-line {
font-weight:bold;
font-size:1.2em;
color:#107AC0;

}

Ajax Load on iPad

benjamin777 — Mon, 31 Oct 2011 16:57:29 -0400

I am new to loading content with Ajax. I found this post very, very helpful:

http://css-tricks.com/8392-ajax-load-container-contents/

I was getting great results until I crossed checked some things on an iPad. My page won't load the Ajax content. Even the demo Ajax content won't load. However, it DOES work on an iphone. Is there something I can look into? Are there ground rules with Ajax/Jquery for the iPad that I need to apply?

Any and all advice and tips are appreciated. Thank you so much.

W3.org vs. HTML5

krysak4ever — Tue, 01 Nov 2011 05:51:35 -0400

how is it possible that in all tutorials they say
YOU CAN DROP the type part for your style + script

http://www.w3.org/TR/html4/present/styles.html
while specs says

14.2.3 Header style information: the STYLE element

type %ContentType;  #REQUIRED -- content type of style language --

Dynamic pages build-up using PHP includes

Opariti — Tue, 01 Nov 2011 04:23:19 -0400

Hi,
I want to dynamically build web pages as per the user's posted requests, driven by a menu.
The pages are built from three parts:
- a header.php file containing the

section, referencing the css and JS files, plus a chunk of the

loading some png common files (banners). The info is static here.
- a footer.php file containing a

section, the usual information about a page. The info is static here as well.
- a set of 'content' pages (part of the

section) that are dynamically loaded as per the user's request, sent to an index.php file which aggregates all three parts (I use this file as a controller). Ex: if the user asks of a 'list' action, I send 'index.php/?request=list', which loads (it really does, except for the rendering and JavaScript event handlers) the list.php content page, if it asks for a 'user' action, I send 'index.php/?request=user', which loads the user.php content page etc.
The problem I have is that it works fine when I load/build the first page, but for all subsequent requests the

references (css and js files) are not recognized by the elements of the loaded 'content' page; and my new built page doesn't have the styling and the event handlers activated. When I trace the URI I see that the JavaScript, the css files and the png static files are part of separate requests to the index.php controller. Therefore I'm missing something here about the .htaccess file configuration (perhaps something else?). Ironically, I regularly use that in Zend, but it seems that the framework kept me away from understanding the use of the index.php controller.
Thanks for help!

Absolute positioning inside table, firfox vs IE

writetonsharma — Tue, 01 Nov 2011 01:36:12 -0400

Hello,

I have a html, the problematic part is below. There is a table with two rows and three columns. There is another table inside the second row and second column. The tables are positioned absolutely. The problem is, when I give absolute position, the outer table is positioned respective to the page but the inner table is rendered differently by different browser's.

Firefox takes it respective to the page and IE, I think is taking it relative to the table cell and so the inner table goes out. So it's no more a table inside a table. I don't know which browser is doing it correctly but I want it the firefox way.

below is the respective part of the code.

" target="_blank" rel="nofollow">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
" target="_blank" rel="nofollow">http://www.w3.org/1999/xhtml">

The problem is solved if I draw the tables independently but which I dont want.

Any thoughts would be very much helpful.

Thanks,
Naveen.

CSS grid / columns ?

krysak4ever — Mon, 31 Oct 2011 09:14:50 -0400

hi,

sry for not uploading 100% size http://minus.com/l4htRSOetiFmf
will do so in evening

this one is a bit zoomed in

I would like to hear some suggestions because I am not so sure
how many columns would you use in this design?

I received the file with 20 columns overlay layer picture in PhotoShop
kinda having problem to find such a grid, well I know 12, 16, 24 column grids

could anyone help me out here please?

my first HTLM5 website

Morten — Tue, 25 Oct 2011 11:32:45 -0400

Hi
This is my first HTML5 website and I´m not sure how to do it right.
Link: http://www.lille-web.dk

Is the html structure right ?

Strange things happens in IE8 % IE7 .... but thats what I expected :-)

100% height not working

Jeager — Wed, 26 Oct 2011 22:56:25 -0400

$(document).ready(function () {
    $("#content").height($(document).height());
});

Using that bit of code to try to achieve my 100% height to my #content. However, its not working... Any ideas?

http://people.ysu.edu/~jtpenezich/tfts/

I solved my other javascript problems (don't know how) but the smooth scroll is working correctly now, and I made it so my #page is always the length of the logo. However i'd like to try and get my #content to always fill up the screen.

wp_list_categories with category description

dtrick — Mon, 31 Oct 2011 21:41:43 -0400

Hi everyone,

I'm working on displaying the first level child categories of a parent category in WordPress & also include the category description.

My code looks as follows, but I'm stuck searching for a solution to include the description:

This outputs each category in an li. It would be great to find a way to echo the description for each category below the li in a p tag.

I appreciate any suggestions.

simple css ie7 help

sly — Mon, 31 Oct 2011 06:19:51 -0400

Hi,

can anyone help with why my background image is not centred in ie7?

http://cstltd.com/agripower/

The page is almost non existent in ie6 - not so worried about that, but it may be a clue.

Thanks,

Sly.

copy mergerd in photoshop cs5

ahmed18 — Sun, 30 Oct 2011 12:15:07 -0400

Hellow everybody

I have problem in Photoshop CS5 , I can't use copy merged with transparent background
in cs3 i can use this option with transparent , now i can't

plz anyone help me !

data attributes and compatibility

hero — Mon, 31 Oct 2011 17:10:28 -0400

I tested the code below in Chrome, Firefox, Internet Explorer 7, 8, and 9. Is it supported in 6?

*[data-role="toolbar"]
{
/* Rules */
}

Div box problem

djpic — Mon, 31 Oct 2011 10:32:57 -0400

I need help with a div block problem.

I want it to look like this:
Correct Layout

But instead, it displays like this:
How it appears

Here is the HTML code:


  
    Upcoming City Holidays

    Christmas
Sunday, Decemeber 25th

    Thanksgiving
Wednesday, Decemeber 25th

  

  
    Annoucements

    
      New City Policy
By: John Doe

      New City Policy
By: John Doe

      New City Policy
By: John Doe

      New City Policy
By: John Doe

      New City Policy
By: John Doe

This is the Style Sheet:


#holidays, #announcements {
	float: left;
	width: 200px;
	border: 1px solid #000;
	padding: 0px;
	text-align: center;
	margin-right: 5px;
	height: 150px;
	overflow: hidden;
}
#holidays h3, #announcements h3 {
	background-color: #006;
	display: block;
	color: #FFF;
	text-align: center;
	padding-top: 2px;
	padding-bottom: 2px;
	font-size: 14px;
	margin-bottom: 20px;
}
#announcements {
	margin-right: 0px;
	text-align: left;
	width: 471px;
}
#announcements div {
	overflow: scroll;
	overflow-style: marquee-line;
	height: 100%;
}
#announcements h3 {
	margin-bottom: 0px;
}
#announcements h4 {
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
	font-size: 14px;
}
#announcements span {
	font-style: italic;
	font-weight: normal;
	font-size: 12px;
}
#holidays p {
	padding: 0px;
	font-size: 12px;
	margin-top: 0px;
	font-style: italic;
}
#holidays span {
	font-weight: bold;
	font-style: normal;
}
#Content {
	width: 680px;
	padding-left: 60px;
	padding-right: 60px;
	padding-bottom: 5px;
	padding-top: 0px;
	background-image: url(../../layout/content_background.jpg);
	clear: both;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}

css horizontal menu help with overlap

rosebean — Mon, 31 Oct 2011 13:03:28 -0400

I have a css horizontal drop-down menu at http://www.lyndabaxter.com/gr/home4.html . The sub-menu works fine when I DON'T push it down to overlap the large rotating image below. But when I push the menu down with a margin-top then I am not able to rollover/click on the sub-menu. The sub-menu disappears before I get a chance. Any ideas how I might solve this? I 've tried using z-index but it didn't seem to work unless I was using it incorrectly??

Thanks for any help :)

jquery captions

westside — Mon, 31 Oct 2011 13:43:35 -0400

Hi,

I am looking for a solution to a problem applying a query caption and fade to a link. I have circular links and would like to apply a caption slide similar to this: http://www.tympanus.net/jCapSlide/ or this: http://www.queness.com/post/1854/the-easiest-javascript-sliding-door-effect-tutorial-with-jquery ,also I am looking for the original image (black and white) to fade to the colour version at the same time as the caption slide.

I am using .png images however the above modules don't constrain to the shape, is there a way to use something along the lines of overflow: hidden instead of creating a frame round the object or another plugin that you might know of?

Many thanks

All Discussions - CSS-Tricks Forums

CSS positioning

Uploaded date

Menu semantics question

For the life of me I can't find this slider/fader. Help?

Need help with understanding placehold.it

IE9 Cufon?

TypeKit vs Google Web Fonts

how to build a slide down page content?

UI Framework/Technology which supports all the borwsers evenly

using localStorage to store css

text and centered images not scaling down help please

Corporate site redesign

mobile-first approach

@media print

Bootstrap + LESS

IE and Firefox Issues with Vertical Navigation Bar

Ajax Load on iPad

W3.org vs. HTML5

Dynamic pages build-up using PHP includes

Absolute positioning inside table, firfox vs IE

CSS grid / columns ?

my first HTLM5 website

100% height not working

wp_list_categories with category description

simple css ie7 help

copy mergerd in photoshop cs5

data attributes and compatibility

Div box problem

Upcoming City Holidays

Annoucements

New City PolicyBy: John Doe

New City PolicyBy: John Doe

New City PolicyBy: John Doe

New City PolicyBy: John Doe

New City PolicyBy: John Doe

css horizontal menu help with overlap

jquery captions

New City Policy
By: John Doe

New City Policy
By: John Doe

New City Policy
By: John Doe

New City Policy
By: John Doe

New City Policy
By: John Doe