[css-d] Floating content contained in Header
Hi all,
I have a header section of my website which will have the logo on the left side
and then on the right side will be some text and other bits and bobs. To?
accomplish this I have done a float left on the div id=headercontent1
containing the image on the left and then a float: right on the div
id=headercontent2 to the right that will contain some text. I have set
widths to both of these so that they meet up correctly. Is this the best way to
accomplish this? I feel that this approach can easily be broken because if div
to the right expands it breaks the layout (i guess this is standard CSS).
The HTML markup and CSS is as follows...
*
HTML
*
div id=header
??? div id=headercontent1
??? ??? asp:Image ID=imgCreditSafeLogo CssClass=creditsafelogo
ImageUrl=~/images/creditsafelogo.gif runat=Server /
??? /div
??? div id=headercontent2
??? ??? div
??? ??? ??? language select:
??? ??? ??? asp:ImageButton ID=ImageButton8 runat=server
ImageUrl=~/Images/lu.gif/
??? ??? ??? asp:ImageButton ID=ImageButton9 runat=server
ImageUrl=~/Images/fr.gif /
??? ??? /div
??? /div
??? div class=clear/div
/div
*
CSS
*
#header
{
??? background:#ddd;
}
#headercontent1
{
??? float: left;
??? width: 200px;
??? background-color: #FFF;
}
#headercontent2
{
??? float: right;
??? width: 536px;
??? height: 90px;
??? padding: 5px;
??? text-align: center;
}
.clear
{
??? clear: both;
}
Thanks and a happy new year to you all.
Tryst
AOL's new homepage has launched. Take a tour at http://info.aol.co.uk/homepage/
now.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Overspill images outside of content area
Hi, and thanks for the reply. The issue with this the solution is that when I increase the width of' #section1 div div' (and #section2) then the rose image starts to hide behind the widened DIV. It seems to have it the way I want, which is to have the stalk of the rose to go behind some of the text then I will need to have the rose image as part of the same DIV, and the best way seems to have it as a background image, and then apply some padding, much like what Walter previously mentioned. I have taken what you showed me as an example and uploaded it to the following location. It now has the BG image as part of the DIV and has the appropriate padding. http://www.trystandsamthewedding.com/test/home4.htm It works ok in IE 7.0 so far, bit do I need to add additional protection to it against IE 6.0 browsers? (isnt there box model issues, or something?) Also, I'd like to know if the approach I am taking is the right one. :) Thanks in advance. Tryst -Original Message- From: Gunlaug Sørtun [EMAIL PROTECTED] To: [EMAIL PROTECTED] CC: css-d@lists.css-discuss.org Sent: Thu, 27 Sep 2007 1.31am Subject: Re: [css-d] Overspill images outside of content area [EMAIL PROTECTED] wrote: http://www.trystandsamthewedding.com/home2.htm image of what I want to achieve... http://www.trystandsamthewedding.com/WesiteLayout.gif Background images can't spill out of their own container, so you'll have to offset the entire container(s) if you want a stable spill-over effect. Example: http://www.gunlaug.no/tos/alien/try/test_07_0926.html Such an offset will make the page wider, but the main part will center nicely and stay within whatever width you give the main containers. I've used 'width: 720px'. regards Georg -- http://www.gunlaug.no Get a FREE AOL Email account with unlimited storage. Plus, share and store photos and experience exclusively recorded live music Sessions from your favourite artists. Find out more at http://info.aol.co.uk/joinnow/?ncid=548. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Overspill images outside of content area
Hi all, I have the following website where I want to be able to have the rose flowers to spill outside of the content area. An example of what I want to finally achieve is in the image, which I have also provided the link for below. I have, in the content area, a couple of DIVs holding in the content, they are #content-wrap, #content, #main, and then the individual divs for each piece of content (i.e.'Wedding Info' and 'Location' etc). I think ideally I'd like to have an image on each content section that overflows (also like I have in the image). I have tried applying a negative horizontal to the 'background' style for the left-hand image, but that seems to cut out the image (same with the right-hand image when I apply a horizontal value that is greater that the #content DIV. Can anyone point me in the right direction as I am a relatively noob on this level of CSS :) Current website... http://www.trystandsamthewedding.com/home2.htm Stylesheet... http://www.trystandsamthewedding.com/styles/style.css image of what I want to achieve... http://www.trystandsamthewedding.com/WesiteLayout.gif Thanks in advance to those who help. Tryst Get a FREE AOL Email account with unlimited storage. Plus, share and store photos and experience exclusively recorded live music Sessions from your favourite artists. Find out more at http://info.aol.co.uk/joinnow/?ncid=548. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Content within wrappers not centralizing in IE7
Hi all, I have the following webpage (http://www.trystandsamthewedding.com/home.htm), which is broken down into three sections: header, content and footer. Each section has a wrapper and then content, like so... div id=header-wrap ??? div id=header-content/div /div div id=content-wrap ??? div id=content/div /div div id=footer-wrap ??? id=footer-content/div /div Now the website shows fine in Firefox where the header and content's content area's are centralized, but in IE it is not. The content's content area is fine in IE, but the header's content starts at the far left. Can anyone see why this is in the following CSS (http://www.trystandsamthewedding.com/styles/style.css)? I have banged my head on this for hours but cant put my finger on it. Would be grateful if you can identify where the problem may be. Thanks Tryst Get a FREE AOL Email account with unlimited storage. Plus, share and store photos and experience exclusively recorded live music Sessions from your favourite artists. Find out more at http://info.aol.co.uk/joinnow/?ncid=548. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Content within wrappers not centralizing in IE7
Hi, and thanks for the reply David. Thanks for pointing out the basic error from me to miss the DOCTYPE. Putting that in seems to have fixed the problem. When you say that the log is not in the intended container, which you probably say because I have borders around the main containers, doesn't it show like this because the logo has 'position: absolute' against it? Thanks? Tryst -Original Message- From: David Laakso [EMAIL PROTECTED] To: [EMAIL PROTECTED] CC: css-d@lists.css-discuss.org Sent: Mon, 17 Sep 2007 3.09pm Subject: Re: [css-d] Content within wrappers not centralizing in IE7 [EMAIL PROTECTED] wrote:? Hi all, I have the following webpage (http://www.trystandsamthewedding.com/home.htm), which is broken down into three sections: header, content and footer. Each section has a wrapper and then content, like so...[trimmed]? ? ? Tryst? ? ? ? I regret it is not working fine in Firefox either-- easily broken with font scaling.? The problem, among other things, is it is unnecessarily complex: you have no doctype, the markup is invalid, the logo is not enclosed in the intended container, and more...? ? You may be better off starting from scratch.? ? If you do not get a better offer, write off-list and I'll try to help get it going.? ? Best,? ? ~dL? ? ? -- http://chelseacreekstudio.com/? ? Get a FREE AOL Email account with unlimited storage. Plus, share and store photos and experience exclusively recorded live music Sessions from your favourite artists. Find out more at http://info.aol.co.uk/joinnow/?ncid=548. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Text Wrapping
Text wrapping around
Have the following CSS and markup...
span.label { margin: 0; padding: 0; width: 40%; border-top: solid 1px #DD;
border-right: solid 1px #AA; text-align: right; }
span.value { margin: 0; padding: 0; font-size: 80%; border: 1px solid #BB;}
div class=data-block
span class=labellabel text here/span
span class=valueanswer text here/span
/div
which comes out like the following...
'Label Text' 'Answer Text'
'lbl text' 'Another answer text'
But with this there is the possibility that the text within span.value can be
quite long and can then fall under the span.label text, which is not what I
want. How can I prevent this so that long text wraps under itself?
Thanks
Tryst
Get a FREE AOL Email account with 2GB of storage. Plus, share and store photos
and experience exclusively recorded live music Sessions from your favourite
artists. Find out more at http://info.aol.co.uk/joinnow/?ncid=548.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Dropdown menu not showing in IE (6)
Right, I think I have found the problem to this. Stupid stupid me :-s
I forgot to upload the csshover.htc (which is required for the hovering of
block elements to work in IE) file to the server - lol.
Tryst
--
Message: 24
Date: Mon, 04 Dec 2006 18:45:19 -0500
From: [EMAIL PROTECTED]
Subject: [css-d] Dropdown menu not showing in IE (6)
To: css-d@lists.css-discuss.org
Message-ID: [EMAIL PROTECTED]
Content-Type: text/plain; charset=us-ascii
Hi all,
I have developed a dropdown menu (the one from the 'More Eric Meyer on CSS')
and have got it to work in Mozilla Firefox, but in IE the second level menu
doesn't show when the first level list item containing the menu is hovered.
Hope you can help me on this, as I really cant see what I'm missing. Below is
the HTML markup for the menu...
div class=linkPool
ul class=level1
lia href= title=Pupils homework...Homework/a/li
li class=submenua class=submenu href= title=The main letters for
parents of pupils...Letters to Parents/a
ul class=level2
lia href=Reception/a/li
lia href=Year one/a/li
lia href=Year two/a/li
/ul
/li
lia href= title=FOSSA Events...FOSSA Events/a/li
li class=submenua class=submenu href= title= The schools current
work...Our Work/a
ul class=level2
lia href=Reception/a/li
lia href=Year one/a/li
lia href=Year two/a/li
/ul
/li
lia href= title=Clubs present in the school...Clubs/a/li
/ul
/div
and the CSS is as follows.
div.linkPool ul {margin: 0; padding: 0; background: white; border: 1px solid
#c2c2bc;}
div.linkPool li {position: relative; list-style: none; margin: 0;
border-bottom: 1px solid #c2c2bc; }
div.linkPool li a {display: block; width: 150px; }
div.linkPoolul a {width: auto; }
div.linkPool ul ul {position: absolute; top: 0; left: -122px; display: none; }
div.linkPool ul.level1 li.submenu:hover ul.level2 {display: block; }
div.linkPool ul ul li {width: 120px; background: white; }
Alternatively, you can see it live at the following url,
www.oldsodbury-pri.s-gloucs.sch.uk
The first level menus that should reveal second level menus are 'Letters to
Parents' and 'Our Work', but as you'll notice, in IE they just don't display.
Hope you can help. Thanks.
Tryst
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Dropdown menu not showing in IE (6)
Hi all,
I have developed a dropdown menu (the one from the 'More Eric Meyer on CSS')
and have got it to work in Mozilla Firefox, but in IE the second level menu
doesn't show when the first level list item containing the menu is hovered.
Hope you can help me on this, as I really cant see what I'm missing. Below is
the HTML markup for the menu...
div class=linkPool
ul class=level1
lia href= title=Pupils homework...Homework/a/li
li class=submenua class=submenu href= title=The main letters for
parents of pupils...Letters to Parents/a
ul class=level2
lia href=Reception/a/li
lia href=Year one/a/li
lia href=Year two/a/li
/ul
/li
lia href= title=FOSSA Events...FOSSA Events/a/li
li class=submenua class=submenu href= title= The schools current
work...Our Work/a
ul class=level2
lia href=Reception/a/li
lia href=Year one/a/li
lia href=Year two/a/li
/ul
/li
lia href= title=Clubs present in the school...Clubs/a/li
/ul
/div
and the CSS is as follows.
div.linkPool ul {margin: 0; padding: 0; background: white; border: 1px solid
#c2c2bc;}
div.linkPool li {position: relative; list-style: none; margin: 0;
border-bottom: 1px solid #c2c2bc; }
div.linkPool li a {display: block; width: 150px; }
div.linkPoolul a {width: auto; }
div.linkPool ul ul {position: absolute; top: 0; left: -122px; display: none; }
div.linkPool ul.level1 li.submenu:hover ul.level2 {display: block; }
div.linkPool ul ul li {width: 120px; background: white; }
Alternatively, you can see it live at the following url,
www.oldsodbury-pri.s-gloucs.sch.uk
The first level menus that should reveal second level menus are 'Letters to
Parents' and 'Our Work', but as you'll notice, in IE they just don't display.
Hope you can help. Thanks.
Tryst
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Footer not occupying full width of containing
Thanks for that.
I just wanted to know if there was a more cleaner way of doing it. With the
fixed widths and left values hard coded in there now, it will more than likely
not scale well when it comes to adjusting/changing the sizes of the containing
DIV's in the future.
Thanks
Tryst
***
I looked quickly and made the following changes to #footer
#footer {
height: 50px;
width: 743px;
position: absolute;
bottom: 0;
left: 8px;
background-color: #ABABAB;
margin: 0;
text-align: center;
color: #00;
}
change
width:100% to width:743px;
left: 0; to left: 8px;
margin: 0 8px; to margin: 0;
Issue resolved.
Hop this helps.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Footer not occupying full width of containing DIV in IE6
This is very strange. I seem to have fixed the IE 6.0 issue, but now I have the
issue in Firefox.
The footer seems to now be expanding outside of the main containing DIV.
I have put borders around the main DIVs on the page so that you can clearly
see the footer breaking out.
http://www.oldsodbury-pri.s-gloucs.sch.uk/index2.php
(style @, http://www.oldsodbury-pri.s-gloucs.sch.uk/styles/screen-layout.css)
My footer CSS is like this...
#footer {
height: 50px;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
border: 1px solid #FF;
background-color: #ABABAB;
margin: 0 8px;
text-align: center;
color: #00;
}
...and my main containing DIV has the following CSS...
#page-home {
position: relative;
min-height: 100%;
height: auto;
background: url(../images/bg_page2.gif) repeat-y;
padding: 0 8px;
width: 743px !important;
width /**/:759px;
border: 1px solid #FF;;
}
Hope you can help me here.
Tryst
How can I get the footer to stretch the full width that is used by the main
outer DIV (page-home). without have to force in a width value?
I thought if I used width 100% this would do it, but the width of the footer
in IE falls well about 20-30 pixels short.
Do you maybe have margin or padding on body or page-home?
--
Steve Clason
Web Design Development
Boulder, Colorado, USA
www.topdogstrategy.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Footer not occupying full width of containing DIV in IE6
Hi all,
I managed to solve my previous footer issue by adding a clearing DIV, but
now I have another issue, which is with the footers width.
How can I get the footer to stretch the full width that is used by the main
outer DIV (page-home). without have to force in a width value?
I thought if I used width 100% this would do it, but the width of the footer
in IE falls well about 20-30 pixels short.
div id=page-home
div id=header /div
div id=container
div id=left_col /div
div id=main_col /div
div id=right_col /div
/div
div id=footer /div
/div
My current CSS for the footer is as follows...
#footer {
width: 100%;
w\idth:759px;
position: absolute;
bottom: 0;
left: 0;
}
#inner_footer {
height: 50px;
border-top: 1px solid #00;
background-color: #ABABAB;
text-align: center;
color: #00;
margin: 0 8px 0 8px;
}
See I have add to force a hack in there for the width, which I don't really
want to do. Is there a way I can neatly fix this issue? Thanks
Tryst
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] DIV with margin expands 100% with a BG color
Hi all, does a DIV expand to its full possible space allowed, even if a margin is applied on the DIV, when a BG color is applied to the same DIV in IE? I seemed to have this issue in IE where I had a DIV that came in because of Margins applied, but when I put a background color in the DIV, the DIV expanded to 100% of its allowed space. Is this a known issue? Thanks Tryst __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Outer DIV not expanding to contain Floating DIV's
Hi, and thanks for the reply all. That has sorted my problem. One more point, though. It was mentioned that 'Overflow: auto;' should be used, but this is not rendered in IE, correct? So, effectively I def need to make use of another DIV that is used for clearing? Thanks Tryst __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Overlapping inner DIV that has Width: 100% (FF)
Hi all,
relating back to my proj about with DIVs I have another issue which seems to
be Firefox 1.5 specific. If I have a container DIV and then an inner DIV
with its width set to 100% it seems to break out of the container DIV on the
right-hand side.
The styles for both the DIV's are as follows...
#container
{
margin-right: auto;
margin-left: auto;
position: relative;
width: 750px;
text-align: left;
border: solid 1px #00;
}
#header
{
width: 100%;
height: 100px;
margin: 5px;
border: solid 1px #00;
}
Thanks
Tryst
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Website Skeleton - Restructure
Hi all, I have been given the task of re-designing a website that was done in tables and am currently in the process of putting the Skeleton in place with DIVs. I have done this after going through the existing website and identifing what section belongs in a DIV etc. Can you please go over it for me to see if I have the skeleton correct? The URL is: http://www.motheratworksolutions.co.uk , and the mark-up is as follows... div id=container !-- * Header * -- div id=header Header Image goes here! /div !-- * Main Menu * -- div id=main_menu Main Menu goes here! This will be a user control called in to each page! /div !-- * Inner Container * -- div id=inner_container div id=lefthand_menu Left-hand menu goes here! /div !-- * Content Container * -- div id=content_container div id=contact_list Contacts Clients /div div id=contact_reports Contacts Reports /div div id=report_upload Upload Document Section /div /div /div /div Hope you can help. (oh yeah, I might be missing a footer, as i'm not sure I will include that yet. Thanks Tryst __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Photo Gallery's
Hi all, I am soon going to implement a online Photo Gallery in CSS and was wondering if any of you knew of any good sites that I can use as a references. Basically, I'd like to make it crisp and clean, and obviously make use of Thumbnails. Thanks Tryst __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Screwed Layout in IE - Contnet area expanded, BG repeating.
Hi all,
I am in the middle of finalising my website/portfolio and have been
predominatley designing in Firefox, and then using conditional IE statements to
include styles that make adjustments for IE based browsers. However, my
portfolio page in IE is a little bit screwed up. The content section seems
expanded, and its background is beginning to repeat on the right, but I don't
see what style is causing this. The website portfolio page can be found at
http://www.reflectivestudios.co.uk/newsite/portfolio.html. The content area's
correct size can be viewed at http://www.reflectivestudios.co.uk/newsite/ (or
alternatively, look at the website in Firefox).
The CSS relating to the Posrtfolio page is as follows...
#content {
width: 540px;
background: url(../images/page.png) repeat-y;
margin: 32px auto 0px auto;
}
#contenthelper {
padding:20px 15px 0px 15px;
margin:0 10px;
background:url(../images/top_shadow.gif) top repeat-x;
}
#contenthelper p {
/*margin: 10px 0;*/
}
/* - Portfolio Page - */
#in-progress_content {
padding: 20px;
text-align: center;
}
#content_wrap {
position: relative;
width: 600px;
}
#projects {
float: left;
width: 150px;
height: 300px;
overflow: auto;
margin: 35px 0 10px 0;
padding: 0px 0px 0 10px;
}
#projects ul {
font: normal 10px/14px 'Lucida Grande','LucidaGrande',Lucida,Sans-Serif;
color: #666;
list-style-type: none;
margin: 0;
padding: 0;
}
#projects ul li {
padding: 5px 0;
margin: 0;
list-style-image: none;
display: block;
width: 149px;
}
#projects ul li a {
padding: 0;
margin: 0;
display: block;
color: #666;
}
#projects ul li a:hover {
padding: 0;
margin: 0;
display: block;
color: #759AC4;
background: none;
}
#portfolio {
float: left;
position: relative;background: url(../images/dotted_line_vert.gif) top
left repeat-y;
width: 300px;
top: 0;
right: 0;
padding: 0 0 0 10px;
margin: -30px 0 0 10px;
}
#portfolio h1 {
font: normal 18px arial, 'Times New Roman', Serif;
line-height: 22px;
color: #690101;
padding: 0px 0 0px 0;
margin: 20px 0 0 0;
}
#portfolio h3 {
font: bold 10px/12px georgia, serif;
color: #333;
text-transform: uppercase;
padding:10px 0 0px 0;
margin: 0;
}
#portfolio p {
font: normal 11px/16px 'Lucida Grande','LucidaGrande',Lucida,Sans-Serif;
color: #666;
padding: 2px 0 8px 0;
margin: 0;
}
/* --- End Portfolio Page --- */
The problem may lie somewhere in the actual CSS file, so feel free to download
that.
If anyone can help me identify the problem, so that I can eradicate it in my MS
specific CSS file it would be great.
Thanks
Tryst
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Screwed Layout in IE - Contnet area expanded, BG repeating.
Hi all,
I managed to find the problem with this. I had the following declaration
screwing things up :(
#content_wrap {
position: relative;
width: 600px;
}
Thanks
Tryst
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Roll-Over DIV's
Hi all, I am looking to recreate something similar to what has been created on ths (good) website in terms of roll-over DIVs. I have looked at the source of this website, but there isn't anything walking me through what is doing what, so does anyone one know of any similar websites that walk you through how to implement this feature? http://www.cssplay.co.uk/menu/scroll_gallery.html what I want to do is slightly different to this in that I'll have a list of links in place instead of images that will provide the roll-over. Thanks Tryst __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Roll-Over DIV's
Hi all, I got a change of implementation. I have two DIVs nested within an outer DIV. The inner DIVs are 'float: left' so are therefore side by side. Inside the left-hand inner DIV there is a UL element that contains links a with SPAN tags wrapped within the anchor tags What I want to do is when I rollover one of the links in the list, I want to display and hide certain DIV elements in the inner right-hand side DIV. All DIV's in the inner right-hand side will all be sat on top of each other, and only one will be shown at any one time. By clicking on the links in the list will determine which DIV gets displayed. Is it at all possible to do this in just CSS without having to use JS? An example of the involving HTML is as followings: div id=content_wrap img src=images/contact_details.gif alt=projects style=padding-bottom:5px; / div id=projects ul id=projects_list li id=preview1a href=/go/main/work/4/28/spanChurchills Art amp Stationerybr /span class=project_typeFeb, 2003/span/span/a/li li id=preview2a href=/go/main/work/4/6/Wedding-Connectbr /span class=project_typeJune, 2005/span/a/li li id=preview3a href=/go/main/work/4/9/Kylie Tributebr /span class=project_typeJan, 2005/span/a/li li id=preview4a href=/go/main/work/4/3/Your Music Zonebr /span class=project_typeApril, 2005/span/a/li li id=preview5a href=/go/main/work/4/11/Frame 24 Productionsbr /span class=project_typeSeptember, 2004/span/a/li /ul /div div id=portfolio div id=portfolio_churchill The css Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. So What is This About? h3The Objective/h3 pDescription about the objective/p h3The Solution/h3 pDescription about the Solution/p h3The Results/h3 pDescription about the results/p /div div id=portfolio_wedding-connect The css Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. So What is This About? h3The Objective/h3 pDescription about the objective/p h3The Solution/h3 pDescription about the Solution/p h3The Results/h3 pDescription about the results/p /div /div /div Thanks Tryst -Original Message- From: David Laakso [EMAIL PROTECTED] To: [EMAIL PROTECTED] Cc: css-d@lists.css-discuss.org Sent: Mon, 09 Jan 2006 10:11:19 -0500 Subject: Re: [css-d] Roll-Over DIV's [EMAIL PROTECTED] wrote: I am looking to recreate something similar to what has been created on ths (good) website in terms of roll-over DIVs. http://www.cssplay.co.uk/menu/scroll_gallery.html Tryst Nicholls does a walk through of a slightly different version here: http://www.webreference.com/programming/css_gallery/. hth. Regards, ~davidLaakso __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] CSS Showcases
Hi all, I'm in need of some CSS driven websites as inspirations in helping my gather ideas for my up an coming website, and was hoping this fountain of knowledge will know of any website that are dedicated to showcasing only the finest CSS websites. I already have some, which are as follows... csszengarden.com http://thesis.veracon.net/ (thought this is brilliant!) Any others? Thanks in advance Tryst __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Position: Fixed - Problem in IE
Hi all (i'm new here, well, not new new, as I have been read alot the
posts - but this is my first post),
My problem: I want to replicate the feature that is used on
Sitepoint.com where they have a fixed DIV element always at the
bottom of the screen. Now to do it in Firefox it works fine, but in IE
it doesn't work (suprise). Anyway, I was directed to a website which
had a hack for this, but having (attempted) to implement this, it
doesn't seem to work - I believe I have used the correct styles, but in
the wrong places. My CSS and HTML to recreate this simple feature is as
follows...
style
body {
margin: 0;
padding: 0;
overflow: hidden;
}
#fixed {
width: 100%;
height: 50px;
position: fixed;
bottom: 0;
left: 0;
background: pink;
}
/style
body
pContent here... /p
div id=fixedpFixed Content in this box will be stuck to the
bottom of the page. /p/div
/body
Now I have gonna through this walkthrough
(http://tagsoup.com/-dev/null-/css/fixed/) to help try and work out the
hack to get it to work in IE, but I am not sure what I need to do. In
the walkthrough it has a DIV with the following style
declarations...height: 100%; overflow: auto;... but are these meant to
go in my 'fixed' Class? If so, it doesn't work.
I know the solution is starring me right in the face, but can someone
help me out on this simple solution :)
Thanks
Tryst
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Position: Fixed - Problem in IE
Yeah, I'm not worried about the Javascript aspect of it such as the closing of the DIV, and its animation. I just need a DIV to sit permanantly at the bottom of the screen/browser. Thanks Tryst __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
