41 users online (1 members and 40 guests)  


Page 1 of 2 1 2 Last
  Results 1 to 15 of 17

Related

  1. CSS Layers and Scrolling    Forum: CSS Forum
    Replies: 3
  2. Relative Positioning    Forum: CSS Forum
    Replies: 1
  3. relative positioning, i think    Forum: CSS Forum
    Replies: 1
  4. columns associated with layers    Forum: CSS Forum
    Replies: 1
  1. #1
    dlongnecker's Avatar
    Tired Student...(Z_z)

    Status
    Offline
    Join Date
    Aug 2004
    Location
    Wichita, KS
    Posts
    86

    Question Multiple Content Layers Relative To Each Other

    Hello! I'm pretty new to CSS-P and have been using a bit of free time to learn CSS-P and database driven sites with ASP (and giving me a new place I can try odd techniques). Borrowing BlueRobot's intial CSS-P stylesheet and making some modifications to it, I've done just fine until I wanted to add two additional contents below the left navigation and right "top content" areas. See the graphic below for a visual of what I'm trying to create.

    http://68.103.158.224:81/layout.png

    The center content and copyright information are displaying correctly because, I assume, they are denoted as relative. The sides, however, are absolute and try as I may, I cannot get them to flow correctly. Idealy, I'd like them to be 20px from the content above them. I've tried creating an entirely new class for each of these, but I don't know how to force it to recognize if something is above it and since the size of the top can vary (e.g. Right Content #1 isn't always going to be 100px in height, it could be 300px if the content is enough), I can't set absolute top variables--or can I?

    I've tossed a copy of the site at http://webtest.doesntexist.com/flowlayout/ I'll continue to work on it and post what progress I've made to this thread.

    Any suggestions, references, etc. would be greatly appreciated.

    Thanks!

    -David

  2. #2
    supertek's Avatar
    please contact admin

    Status
    Offline
    Join Date
    Aug 2004
    Location
    Wichita, KS
    Posts
    19
    I see you are in wichita from the copyright on the site. Hehe I didn't even notice the location on the post. I am too. Also noticed you are a FFXI player. me too

    If you don't mind can you post your CSS so I can take a looky and see why you may be having a problem with the layout?
    Last edited by supertek; 08-19-2004 at 11:04 AM.

  3. #3
    dlongnecker's Avatar
    Tired Student...(Z_z)

    Status
    Offline
    Join Date
    Aug 2004
    Location
    Wichita, KS
    Posts
    86
    Here's the CSS. Like I said previous, it's a modified/borrowed version from BlueRobot's site. I like the layout and the flow, but want to add those optional (code-depended) "windows". I left BlueRobot's initial comments in the code (for my own reference if nothing else)... so that might help.

    Code:
    body {
    	color:#333;
    	background-color:#6699CC;
    	margin:20px;
    	padding:0px;
    	font:11px verdana, arial, helvetica, sans-serif;
    	}
    h1 {
    	margin:0px 0px 15px 0px;
    	padding:0px;
    	font-size: 1.5em;
    	font-weight:900;
    	color:#999;
    	}
    h2 {
    	font:bold verdana, arial, helvetica, sans-serif;
    	font-size: 1.25em;
    	margin:0px 0px 5px 0px;
    	padding:0px;
    	}
    p {
    	font:100% verdana, arial, helvetica, sans-serif;
    	margin:0px 0px 16px 0px;
    	padding:0px;
    	}
    .Content>p {margin:0px;}
    .Content>p+p {text-indent:30px;}
    
    a {
    	color:#09c;
    	font-size:100%;
    	font-family:verdana, arial, helvetica, sans-serif;
    	font-weight:600;
    	text-decoration:none;
    	}
    a:link {color:#09c;}
    a:visited {color:#07a;}
    a:hover {background-color:#eee;}
      
    
    /* All the content boxes belong to the content class. */
    .content {
    	position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
    	width:auto;
    	min-width:120px;
    	margin:0px 210px 20px 170px;
    	border:1px solid black;
    	background-color:white;
    	padding:10px;
    	z-index:1; /* This allows the content to overlap the right menu in narrow windows in good browsers. */
    	}
    
    #navAlpha {
    	position:absolute;
    	width:150px;
    	top:20px;
    	left:20px;
    	border:1px dashed black;
    	background-color:#eee;
    	padding:10px;
    	z-index:3;
    
    /* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity. 
    Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it. 
    IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style 
    declaration. The incorrect IE5/Win value is above, while the correct value is 
    below. See http://glish.com/css/hacks.asp for details. */
    	voice-family: "\"}\"";
    	voice-family:inherit;
    	width:150px;
    	}
    /* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds correct 
    length values to user agents that exhibit the parsing error exploited above yet get 
    the CSS box model right and understand the CSS2 parent-child selector. ALWAYS include
    a "be nice to Opera 5" rule every time you use the Tantek Celik hack (above). */
    body>#navAlpha {width:150px;}
    		
    #navBeta {
    	position:absolute;
    	width:190px;
    	right:20px;
    	border:1px dashed black;
    	background-color:#eee;
    	padding:10px;
    	z-index: 2;
    /* Again, the ugly brilliant hack. */
    	voice-family: "\"}\"";
    	voice-family:inherit;
    	width:190px;
    	}
    /* Again, "be nice to Opera 5". */
    body>#navBeta {width:190px;}
    Hope this helps. Also, any way to made that annoying narrow code window be bigger?! Eesh.

    On an FFXI Note: Cool. Everyone should have FFXI... mindlessly killing every bunny in Ronfaure is a great way to relax after a long day of coding.

    -David

  4. #4
    supertek's Avatar
    please contact admin

    Status
    Offline
    Join Date
    Aug 2004
    Location
    Wichita, KS
    Posts
    19
    I have been tinkering with it since you posted it.

    instead of using position: left I tried float: left for the first menu on the left and then clear: left for the one under it. I can't get the spacing between them worked out though. It puts the other block right under it. I am stilling tinkering with that.

    This does however put the next nav block under the previous one.

    So the right side could be float: right and clear: right.

    The center block would have to be changed to a absolute position instead of the current relative otherwise it drops down below the other div's. I will tinker with this some more.

    I would like to get this to work as well. You gave me some ideas to use for my PHP-Nuke themes.

    FFXI server: Odin.

  5. #5
    dlongnecker's Avatar
    Tired Student...(Z_z)

    Status
    Offline
    Join Date
    Aug 2004
    Location
    Wichita, KS
    Posts
    86

    Placements...

    Yeah, I got EVERYTHING to align to one side and flow... and I played around with the placement in the HTML code... e.g. The HTML is output as:

    NAVIGATION
    RIGHT-CONTENT #1
    CONTENT
    COPYRIGHT

    Rather than use:

    NAVIGATION
    RIGHT-CONTENT #1
    RIGHT-CONTENT #2
    CONTENT
    COPYRIGHT

    I tried:

    NAVIGATION
    RIGHT-CONTENT #1
    CONTENT
    RIGHT-CONTENT #2
    COPYRIGHT

    and it seemed to place it even with the copyright area; however, it didn't start after content #1, but at the end of the content section (>_<);

    I'll keep tinkering with the floats--good idea.

    PHP-Nuke, huh? I've been looking at a few content management systems for our new usd259.com site... We're getting ready to implement SharePoint Portal Server for our intranet portal because of it's Single Signon Service... but external, who knows. PHP is cool and I've seen some amazing things done with it; however, with our Microsoft infrastructure, we're still focused to ASP and .NET. Hope you can get a bit out of this.

    FFXI: Isn't Odin one of the primary JP servers? I'm on Valefor, which is about 75% JP--it's amazing how much a game can motivate you to learn another language.

    -David

  6. #6
    supertek's Avatar
    please contact admin

    Status
    Offline
    Join Date
    Aug 2004
    Location
    Wichita, KS
    Posts
    19
    I've never been a big ASP user. I tinker a bit with .net but other wise I stick with PHP. PHP can be installed on a win2k server without much trouble giving you the ability to use both PHP and ASP.

    If you are looking for an ASP cms though maybe check out http://www.starphire.com/

    If you are interested in a PHP solution let me know I'll point you in the right direction.

    FFXI: yeah odin has a lot of JP players. I think it's pretty much 50-50 now though. Depending on what time of day you log on.

  7. #7
    dlongnecker's Avatar
    Tired Student...(Z_z)

    Status
    Offline
    Join Date
    Aug 2004
    Location
    Wichita, KS
    Posts
    86

    .. and more..

    Yeah, I've got PHP and ActivePerl loaded on my local workstation to do testing (our calendar software is written in Perl). I'm shocked my system doesn't crash more often... enough oddball DLLs.

    Anyway, a question.

    Trying to think back to programming... can you stagger the loading of the page?

    If the centre content is pushing the nav bars down too far, could you render the nav bars, then the center content , then the right nav bars? I remember this from somewhere, but the brain isn't clicking at the moment.

    I can get, as I think you have done, the bars to line up vertically just fine... I fixed the border-to-border issue by increasing the "top:20px;" on the second left nav bar to 30px... not sure how that'd work in a production environment, but it moved them apart.

    -David

  8. #8
    supertek's Avatar
    please contact admin

    Status
    Offline
    Join Date
    Aug 2004
    Location
    Wichita, KS
    Posts
    19
    Not really sure about the rendering thing. But I think I got the answer to your spacing the nav menus thing

    margin-bottom: 20px;

    Use that on the menus then it should put a 20 px margin at the bottom and the next box will start further down.

    Also check out this awsome site I found. http://www.csszengarden.com/ It has different layouts that you can click on and they are all done in CSS. Right on the page they have links to download the CSS and HTML. There are some really nice layouts. Might give you some ideas or solve some issues.
    Last edited by supertek; 08-19-2004 at 07:37 PM.

  9. #9
    dlongnecker's Avatar
    Tired Student...(Z_z)

    Status
    Offline
    Join Date
    Aug 2004
    Location
    Wichita, KS
    Posts
    86

    Hmm..

    Okay, I've been kicking that around this morning and... where are you applying the 'margin-border:20px;'? Creating a new navLeft2 or whatever class and apply it to that or applying it to the existing class?

    Everything I've tried keeps building the left box correctly, but tossing the center and right boxes below it and/or floating the second left content ontop of the left navigation and center box.

    http://webtest.doesntexist.com/layout2.png

    Here's the CSS code for those two sections:

    Code:
    #navAlpha {
    	position:absolute;
    	margin-bottom: 20px;
    	width:150px;
    	top:20px;
    	left:20px;
    	border:1px dashed black;
    	background-color:#eee;
    	padding:10px;
    	z-index:3;
    	voice-family: "\"}\"";
    	voice-family:inherit;
    	width:150px;
    	}
    body>#navAlpha {width:135px;}
    
    #navLeft2 {
    	position:relative;
    	float: left;
    	width:150px;
    	top: 20px;
    	left:20px;
    	border:1px dashed black;
    	background-color:#eee;
    	padding:10px;
    	z-index:3;
    	voice-family: "\"}\"";
    	voice-family:inherit;
    	width:150px;
    	}
    body>#navLeft2 {width:135px;}
    I've currently got the pages laid out in the ASP file as:

    LEFT NAVIGATION (navAlpha)
    LEFT CONTENT #1 (navLeft2)
    RIGHT CONTENT #1 (navBeta)
    BODY CONTENT (content)
    COPYRIGHT (content)

    Here's the actual ASP code to build the page. Most of it's kinda messy since it's taking 90% of the information from a database, but, it'll give an idea of where the HTML coding is.

    Code:
    <%@ LANGUAGE="VBSCRIPT" %>
    <%Option Explicit%>
    <%
    
    ' ----- Global Options
    Response.Buffer = True
    
    ' ----- Build Variables for Page
    
    Dim q 				' as QueryString
    Dim thispage		' as String
    Dim strSQL			' as String
    Dim rs				' as Recordset
    Dim strConnString	' as String
    Dim cnnFormToDB		' as ADODB Connection Object
    
    ' ----- Build Page Properties and Header Sections
    
    strConnString = "Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" & Server.MapPath("flowlayout.mdb")
    Set cnnFormToDB = Server.CreateObject("ADODB.Connection")
    cnnFormToDB.Open strConnString
    
    ' ----- Determine what page this is and give it the approprate title from the
    ' ----- database.
    
    q = Request.QueryString()
    If q = "" then
    	thispage = "index"
    else
    	thispage = q
    end if
    
    strSQL = "SELECT * from tblPageInfo WHERE Page = '" & thispage & "'"
    Set rs = cnnFormToDB.Execute(strSQL)
    
    ' ----- Build header section of page.
    
    	response.write("<?xml version='1.0' encoding='UTF-8'?>")
    	response.write("<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>")
    	response.write("<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>")
    	response.write("<head>")
    	response.write("<title>" & rs("DisplayTitle") & "</title>")
    	response.write("<style type='text/css' media='screen'>@import 'flow.css';</style>")
    	response.write("</head>")
    	response.write("<body>")
    
    ' ----- Build Left Navigation Section (tblNavigationLinks)
    
    ' ----- Build Global Links (marked 'all')
    
    response.write("<div id='navAlpha'>")
    response.write ("<h2>Navigation</h2>")
    strSQL = "SELECT * from tblNavigationLinks WHERE Page = 'all'"
    Set rs = cnnFormToDB.Execute(strSQL)
    While Not rs.EOF
    	response.write("<a href='?" & rs("LinkAddress") & "' title='" & rs("AltText") & "'>" & rs("LinkName") & "</a><br>")
    	rs.MoveNext
    Wend
    	response.write("<hr color='#000000' noshade>")
    
    ' ----- Build Page Specific Links (marked with page name)
    
    strSQL = "SELECT * from tblNavigationLinks WHERE Page = '" & thispage & "'"
    Set rs = cnnFormToDB.Execute(strSQL)
    While Not rs.EOF
    	response.write("<a href='?" & rs("LinkAddress") & "' title='" & rs("AltText") & "'>" & rs("LinkName") & "</a><br>")
    	rs.MoveNext
    Wend
    response.write("</div>")
    
    ' ----- Build BETA TESTING SECTION *************************
    
    response.write("<div id='navLeft2'>")
    response.write ("<h2>Navigation</h2>")
    strSQL = "SELECT * from tblNavigationLinks WHERE Page = 'all'"
    Set rs = cnnFormToDB.Execute(strSQL)
    While Not rs.EOF
    	response.write("<a href='?" & rs("LinkAddress") & "' title='" & rs("AltText") & "'>" & rs("LinkName") & "</a><br>")
    	rs.MoveNext
    Wend
    	response.write("<hr color='#000000' noshade>")
    
    ' ----- Build Page Specific Links (marked with page name)
    
    strSQL = "SELECT * from tblNavigationLinks WHERE Page = '" & thispage & "'"
    Set rs = cnnFormToDB.Execute(strSQL)
    While Not rs.EOF
    	response.write("<a href='?" & rs("LinkAddress") & "' title='" & rs("AltText") & "'>" & rs("LinkName") & "</a><br>")
    	rs.MoveNext
    Wend
    response.write("</div>")
    
    ' ----- Build Top Right Important Info Section (tblImportantInfo) 
    
    ' ----- Does this page have "important info"?
    strSQL = "SELECT * from tblPageInfo WHERE Page = '" & thispage & "'"
    Set rs = cnnFormToDB.Execute(strSQL)
    If rs("DisplayImportantInfo") = "True" Then
    
    ' ----- If yes, build the section.
    
    	response.write("<div id='navBeta'>")
    	strSQL = "SELECT * from tblImportantInfo WHERE Page = '" & thispage & "'"
    	Set rs = cnnFormToDB.Execute(strSQL)
    	rs.MoveFirst
    	While Not rs.EOF
    		response.write("<h2>" & rs("SectionTitle") & "</h2><b>" & rs("Title") & "</b><p>" & rs("Date") & "</p><p>" & rs("Content") & "</p><br>")
    		rs.MoveNext
    	Wend
    Else
    ' ----- Else do nothing, creates an empty column.
    End If
    response.write("</div>")
    
    ' ----- Middle - Main Content Page
    
    response.write("<div class='content'>")
    strSQL = "SELECT * FROM tblGlobal"
    Set rs = cnnFormToDB.Execute(strSQL)
    	response.write("<h1>" & rs("SiteHeading1") & "</h1>")
    	response.write("<h2>" & rs("SiteHeading2") & "</h2>")
    	response.write("<hr color='" & rs("RulerColor") & "' noshade>")
    
    strSQL = "SELECT * FROM tblBodyContent WHERE Page = '" & thispage & "' ORDER BY Date DESC"
    Set rs = cnnFormToDB.Execute(strSQL)
    
    rs.MoveFirst
    While Not rs.EOF
    	response.write("<b>" & rs("Title") & "</b><p>" & rs("Date") & "</p><p>" & rs("Content") & "</p>")
    	rs.MoveNext
    Wend
    response.write("</div>")
    
    ' ----- Build Copyright Information Section (tblOther)
    
    response.write("<div class='content'>")
    	strSQL = "SELECT Content FROM tblOther WHERE TypeContent = 'Copyright'"
    	Set rs = cnnFormToDB.Execute(strSQL)
    	rs.MoveFirst
    	While Not rs.EOF
    		response.write("<p align='center'>" & rs("Content") & "</p>")
    		rs.MoveNext
    	Wend
    response.write("</div>")
    
    ' ----- Close out page with closing tags.
    
    response.write("</body>")
    response.write("</html>")
    
    ' ----- Close and null all variables.
    
    	strSQL = ""
    	strConnString = ""
    	Set rs = Nothing
    	Set cnnFormToDB = Nothing
    	
    ' ----- EOF
    	
    %>
    (^_^) Please excuse the odd variable names for some of it... one of those stream-of-thought coding pages that I'll go back and clean everything up in later phases.

    *blank stare*

    Thanks!

    -David
    Last edited by HTML; 03-09-2012 at 07:23 PM.

  10. #10
    dlongnecker's Avatar
    Tired Student...(Z_z)

    Status
    Offline
    Join Date
    Aug 2004
    Location
    Wichita, KS
    Posts
    86

    Smile Huzzah!

    (^_^)

    Okay... after doing a bit of thinking... I considered just ignoring floating each BOX and placing each grouping of boxes into their own little DIVs.

    Code:
    .content {
    	position:relative;
    	width:auto;
    	min-width:120px;
    	margin:0px 210px 20px 170px;
    	border:1px solid black;
    	background-color:white;
    	padding:10px;
    	z-index:1;
    	}
    
    #navBoxLeft {
    	position: relative;
    	width: 150px;
    	border: 1px dashed #000000;
    	background-color:#eee;
    	padding: 10px;
    	margin-bottom: 20px;
    	voice-family: "\"}\"";
    	voice-family:inherit;
    	width:150px;
    	}
    body>#navBoxLeft {width:135px;}
    		
    #navBoxRight {
    	position: relative;
    	width: 190px;
    	border: 1px dashed #000000;
    	background-color:#eee;
    	padding: 10px;
    	margin-bottom: 20px;
    	voice-family: "\"}\"";
    	voice-family:inherit;
    	width:190px;
    	}
    body>#navBoxRight {width:175px;}
    
    #ParentLeft {
    	position: absolute;
    	top: 20px;
    	left: 20px;
    	voice-family: "\"}\"";
    	voice-family:inherit;
    }
    
    #ParentRight {
    	position: relative;
    	float: right;
    	voice-family: "\"}\"";
    	voice-family:inherit;
    }
    And...

    http://webtest.doesntexist.com/layout3.png

    In the eternal world of FFXI... [/DANCE]. (^_^) (Elvaan need dances like Tarus...)

    Note: This isn't working in Mozilla-based browsers and Opera... but looks pretty in IE [/sigh]. I'm going to do some code comparisons and see what I left out that was tweaking the other browsers, but... hmm... yeah.

    I've refreshed the code at http://webtest.doesntexist.com/flowlayout with this updated code. I'll post more to this thread as I tweak the CSS for Opera and Mozilla-based browsers.

    -David
    Last edited by dlongnecker; 08-20-2004 at 09:04 AM.

  11. #11
    dlongnecker's Avatar
    Tired Student...(Z_z)

    Status
    Offline
    Join Date
    Aug 2004
    Location
    Wichita, KS
    Posts
    86
    Hmm, also noticed that the right bar interferes with the content on the content window... gonna have to fix that too...

    -David

  12. #12
    dlongnecker's Avatar
    Tired Student...(Z_z)

    Status
    Offline
    Join Date
    Aug 2004
    Location
    Wichita, KS
    Posts
    86

    Good site...

    Here's where I'm working from on this coding:

    http://codepunk.hardwar.org.uk/acss08.htm

    with a sample of the layout at:
    http://codepunk.hardwar.org.uk/csample09.htm

    I can't, however, get the boxes to layout quite like that... I'm going to take that code and toss the picture in there to see how it reacts... perhaps that big picture is the evil doer..

    EDIT: Yeah... that picture tosses to the bottom... Hmm... Anyone have any suggestions? Is there a way in the coding to toss the RIGHT boxes (z-index, I'm guessing) to the background (can be done), but where it won't push the center content?

    -David
    Last edited by dlongnecker; 08-20-2004 at 09:41 AM.

  13. #13
    supertek's Avatar
    please contact admin

    Status
    Offline
    Join Date
    Aug 2004
    Location
    Wichita, KS
    Posts
    19
    Looking at those sites you just named it looks like he is floating the blocks on the right. I think you still have the right blocks on absolute and relative. Have you tried to just float the right ones?

  14. #14
    dlongnecker's Avatar
    Tired Student...(Z_z)

    Status
    Offline
    Join Date
    Aug 2004
    Location
    Wichita, KS
    Posts
    86

    Floating DIVs

    Yeah, if you check the earlier post, I encapsulated the individual box DIVS into "parent" boxes (like the site showed). The lefts are set absolute, the right are relative and floating:

    Code:
    #ParentRight {
    	position: relative;
    	float: right;
    	voice-family: "\"}\"";
    	voice-family:inherit;
    }
    -David

  15. #15
    supertek's Avatar
    please contact admin

    Status
    Offline
    Join Date
    Aug 2004
    Location
    Wichita, KS
    Posts
    19
    oh yeah. lol It's been a long day. Looks good though

    {/panic} TaruTaru



Page 1 of 2 1 2 Last

Tags for this Thread