Jump to content

Search the Community

Showing results for tags 'container'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Found 13 results

  1. I am trying to have my background in my division take up it's full height but it is only taking up the height of the header. I've tried setting the height but it doesn't budge. It will only fill as much content as I have in the section, the problem is I only want the one header and that's all. I am simply trying to recreate a webpage that I made on weebly with for my class in html but I am really stuck on this. I will post the code below and a screen shot. <!DOCTYPE html> <html> <head> <style> .first { background-image: url('trampoline.jpg'); margin-bottom: 1000px; background-size: cover; } .column { float: left; padding: 15px; } .clearfix::after { content: ""; clear: both; display: table; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; font-family: arial; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: #111; } .footer { background-color: grey; color: white; padding: 15px; } </style> </head> <body> <ul> <li style="float:right"><a href="#news">HOME</a></li> <li style="float:right"><a href="#contact">ABOUT ME</a></li> <li style="float:right"><a href="#about">ABOUT FAMILY</a></li> <li style="float:right"><a href="#about2">ABOUT SCHOOL</a></li> </ul> <div class="first"> <h1>Hi, I'm Mr. Buza. Technology teacher</h1> </div> <div class="clearfix"> <div class="column content"> <h1>The City</h1> <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p> <p>You will learn more about web layout and responsive web pages in a later chapter.</p> </div> </div> <div class="footer"> <p>Footer Text</p> </div> </body> </html>
  2. I created a contact form inside a wordpress container using the column selection. When I apply the code only inside the container it changes the color of the entire page to that background color of the form. Also, the form has side by side fields but for some reason onilne the fields are stacked. See photos. As you can see in the first picture I removed the background color. Thank you.
  3. -I am generating image gallery that suports different types of containers. ie 33% container,50%container and 100 % container. -if container is of type 33% percent then three containers will come in one row separated by verticle line and margin. I want to remove left margin of first container and right margin last container.-if container is of type 50% percent then two containers will come in one row separated by verticle line and margin. I want to remove left margin of first container and right margin other container. -if container is of type 100% percent then only one container is there and no need to remove margin.-Issue is that when multiple containers of this types are present in image gallery in any sequence then how predict which containers rignt margin and line separator has to remove. how to do this? following is xsl file: <xsl:when test="intLayoutType = 219"> <xsl:if test="intNum4 = 2"> <![CDATA[<div class=three_column]]> <xsl:if test="position() = 1"> <![CDATA[style=margin-left: 0px]]> </xsl:if> <xsl:if test="position() = last()"> <![CDATA[style=margin-right: 0px; border-right:none]]> </xsl:if> <xsl:if test="preceding-sibling::intNum4[1]=2 and preceding-sibling::intNum4[2]=2"> <![CDATA[style=margin-right: 0px; border-right:none]]> </xsl:if> <![CDATA[>]]> </xsl:if> <xsl:if test="intNum4 = 1"> <![CDATA[<div class=two_column]]> <xsl:if test="position() = 1"> <![CDATA[style=margin-left: 0px]]> </xsl:if> <xsl:if test="position() = last() "> <![CDATA[style=margin-right: 0px; border-right: none]]> </xsl:if> <xsl:if test="position() mod 2 = 0"> <![CDATA[style=margin-right: 0px; border-right: none]]> </xsl:if> <![CDATA[>]]> </xsl:if> <xsl:if test="intNum4 = 0"> <![CDATA[<div class="one_column">]]> </xsl:if> <WD:ContentController MenuPosition="Content" ResourceFamily="CNT" runat="server"> <xsl:attribute name="contentId"> <xsl:value-of select="autContentId"/> </xsl:attribute> <ContentTemplate> <!--for 33% container and 50% container--> <xsl:if test="intNum4 = 2 or intNum4 = 1"> <![CDATA[<div class="gallery_margin_right">]]> <xsl:if test="string-length(vchTitle) > 0"> <![CDATA[<h1 class="gallery_title">]]> <xsl:value-of select="vchTitle" /> <![CDATA[</h1>]]> </xsl:if> <!--Website display--> <xsl:if test="string-length(vchImageUrl1) > 0"> <![CDATA[<asp:Image runat=server" class="gallery_img" ImageUrl=]]><xsl:value-of select="vchImageUrl1" /> <![CDATA[" ToolTip="]]><xsl:value-of select="vchImageAltText1" /> <![CDATA[" AlternateText="]]><xsl:value-of select="vchImageAltText1" /> <![CDATA[" />]]> </xsl:if> <!--<div> <xsl:value-of select="vchTxt1" /> </div>--> <![CDATA[<div class="gallery_description">]]><xsl:value-of select="vchTxt1" /> <![CDATA[</div>]]> <xsl:if test="string-length(vchTxt4) > 0"> <![CDATA[<p class="gallery_plink">]]> <![CDATA[<asp:HyperLink runat=server" class="gallery_link" Text=]]><xsl:value-of select="vchTxt4" /> <![CDATA[" NavigateUrl="]]><xsl:value-of select="vchTxt6" /> <![CDATA[" ToolTip="]]><xsl:value-of select="vchTxt5" /> <![CDATA[" Target="]]><xsl:value-of select="vchTxt9" /> <![CDATA[" />]]> <![CDATA[</p>]]> </xsl:if> <xsl:if test="string-length(vchAscxTagName) > 0"> <![CDATA[<wd:]]><xsl:value-of select="vchAscxTagName" /><![CDATA[ id=imageStrip" class="gallery_imageStrip" runat="server" ContentId=]]><xsl:value-of select="autContentId" /><![CDATA[" />]]> </xsl:if> <![CDATA[</div>]]> </xsl:if> <!--for 100 % container--> <xsl:if test="intNum4 = 0"> <!--Website display--> <![CDATA[<div style="clear: both;">]]> <![CDATA[</div>]]> <![CDATA[<div>]]> <xsl:if test="string-length(vchImageUrl1) > 0"> <![CDATA[<div class="gallery_imgalign_one_column">]]> <![CDATA[<asp:Image runat=server" class="gallery_img" ImageUrl=]]><xsl:value-of select="vchImageUrl1" /> <![CDATA[" ToolTip="]]><xsl:value-of select="vchImageAltText1" /> <![CDATA[" AlternateText="]]><xsl:value-of select="vchImageAltText1" /> <![CDATA[" />]]> <![CDATA[</div>]]> </xsl:if> <![CDATA[<div class="gallery_one_column">]]> <xsl:if test="string-length(vchTitle) > 0"> <![CDATA[<h1 class="gallery_title_one_column">]]> <xsl:value-of select="vchTitle" /> <![CDATA[</h1>]]> </xsl:if> <![CDATA[<div class="gallery_description_one_column">]]><xsl:value-of select="vchTxt1" /> <![CDATA[</div>]]> <xsl:if test="string-length(vchTxt4) > 0"> <![CDATA[<p class="gallery_plink_one_column">]]> <![CDATA[<asp:HyperLink runat=server" class="gallery_link" Text=]]><xsl:value-of select="vchTxt4" /> <![CDATA[" NavigateUrl="]]><xsl:value-of select="vchTxt6" /> <![CDATA[" ToolTip="]]><xsl:value-of select="vchTxt5" /> <![CDATA[" Target="]]><xsl:value-of select="vchTxt9" /> <![CDATA[" />]]> <![CDATA[</p>]]> </xsl:if> <xsl:if test="string-length(vchAscxTagName) > 0"> <![CDATA[<wd:]]><xsl:value-of select="vchAscxTagName" /><![CDATA[ id=imageStrip" class="gallery_imageStrip" runat="server" ContentId=]]><xsl:value-of select="autContentId" /><![CDATA[" />]]> </xsl:if> <![CDATA[</div>]]> <![CDATA[</div>]]> </xsl:if> </ContentTemplate> </WD:ContentController> <xsl:if test="intNum4 = 0 or intNum4 = 1 or intNum4 = 2"> <![CDATA[</div>]]> </xsl:if> </xsl:when>
  4. enimy6

    Center page

    My page was centered in the web page, but now it isn't anymore.. this is my code html: <!doctype html><html><head><link href="../css/style.css" rel="stylesheet" type="text/css"/><meta charset="utf-8"><title>Events</title></head><body><div id="page"><div id="logo"><img src="../images/ETlogo.jpg"></div><header><h1> Latest Electric Car News </h1></header><nav><ul><li><a href="home.html">Home</a></li><li><a href="Staff.html">Staff</a></li><li><a href="Subscription.html">Subscription</a></li><li><a href="Events.html" class="current">Events</a></li><li><a href="News.html">News</a></li><li><a href="Sitemap.html">Sitemap</a></li></ul></nav><article><h1>Events</h1></article><footer>Sitemap</footer></div></body></html> CSS: @charset "UTF-8";/* CSS Document */##page{ margin-left:auto; margin-right:auto; width:1024px;}li{ list-style-type:none;}#logo{ width:203px; height:183px; display:inline-block; text-align:center; border-right:solid 1px #999999; position:fixed;}header{ background-color:#FFF; width:100%; width:600px; height:85px; float:left; padding-top:30px; padding-left:20px; margin-left:203px; border-left:solid 1px #999999; }p{ font-size:100%; font-family:Georgia, "Times New Roman", Times, serif; }h1{ font-size:30px; font-family:Georgia, "Times New Roman", Times, serif; color:#B90000}h4{ font-family:Georgia, "Times New Roman", Times, serif; font-size:16px; margin-bottom:auto; color:#B90000;}nav { float:left; width:203px; border-right:solid 1px #999999; height:clear; background-color:#FFF; position:fixed; margin-top:200px; }nav a{ color:#B90000; font-size:18px; text-decoration: none}nav a:active{ font-weight:800; text-align:right;}nav a:visited { } nav a.current:link, a.current:visited { font-weight:900;} article{ padding:10px; width:600px; display:block; float:left; background-color:#FFF; border-top:solid 1px #999999; border-left:solid 1px #999999; margin-left:203px;}form glowing-border { border: 2px solid #dadada; border-radius: 7px;}form glowing-border:focus { outline: none; border-color: #9ecaed; box-shadow: 0 0 10px #9ecaed;}input{ width:400px; margin-bottom:10px;}footer{ clear:both; width:100%; height:30px; border-top:solid 1px #999999; border-radius:5px;} Why won't it position in the center of the page?
  5. Hi, I have a wordpress blog, http://bupphawitt.com/, that I want to create extra sidebars outside the container, and on both sides of it. The sidebars have to be fixed, so that when I scroll down the page the sidebars remain fixed. Please see yahoo page for similar idea I want to create, http://www.yahoo.com/. Have a look at its left sidebar, which is how I want my site to be, just the extra boxes on both sides. I have tried to create a wrapper outside it, but unsuccessful. I must have done something wrong. Can someone please guide me to the right direction? Any help would be highly appreciated. Please find a drawing attached, so you can better see how it should look. Beforehand Thanks! My website is: http://bupphawitt.com/ Regards, Buppha Witt
  6. If an element is relatively positioned, its child is absolutely positioned (within the parent container), and the child has a child which is also absolutely positioned. Why is it that the child's child continues to be absolutely positioned relative to its parent container, when it's parent isn't relatively positioned? It seems to go on an on like this.I'm probably just thinking about this the wrong way, but I find it to be confusing. If someone could explain this to me, I would be greatful.
  7. Hello, I'm trying to fix my background image so that is stays positioned around the content container when a web browser is resized like: http://digitaldudz.com. I'd love to know how to do this. When I try to accomplish this same task the background image moves when the web browser is moved and the container floats over the background image. Any help would be greatly appreciated. Thanks!
  8. Hello. Can anybody explain me how can I set distance between two <div> in a container? Look at the example: <div id="container"> <div id="item1"></div> <div id="item2"></div></div> I need a distance between item1 and item2. I've already played with top, bottom, margin, but nothing help me. Then how?
  9. I have 2 questions. First one is most important! I attach the php, and the css files here for you (Hello dsonesuk ) to look and maybe help me with this. I may know how to do this, but then i might need to change it all and do it all from a a beginning again. So i would like a fast change advise for this problem. Anyway here it goes: I have the class called "sidboxes" wich are located to the right of the container(browser). And in that class 3 classes - the classes are called sidbox1, 2, and 3 for each of the 3 boxes. So i have now as you can see in the css an position:absolute. When i minimize the window here at the workplace i am, it moves around 5-10 mm. But when i am at home at the laptop this whole class move about 10 cm into the middle! I tried(not at home though but here where i am now on a different computer.) to write relative instead(as i think it actually must be relative!) but then this whole class moves down and makes a big space below everything. Now the images are not attached but i think you know how to help anyway . The boxes are supposed to be at the same place AS they are when having the absolute tag, BUT not move around when minimizing a window. As neither absolute seems to be the right tag to use, i need help now, cause i tried with relative both outside and inside the container i have. 2 question: What can i do to remove that empty space at the bottom wich is about 2-3 cm???? (the last cssfile attached is for the menyboxes to the left. I think the empty space got to do with them....) index52.php pse52.css pse5menyset2.css
  10. <?phprequire_once('includes/i_rsslib.php');require_once('functions/f_lib.php');?><!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Daily Sports Guide</title><link type="text/css" rel="stylesheet" href="style/style.css"><link type="text/css" rel="stylesheet" href="style/suckerfish.css"></head><body> <div id="wrapper"> <?php require_once('includes/i_header.php'); ?> <!-- start columns left and right --><div id="container2"><div id="container1"> <div id="col1"><?php include("index_leftcolumn.html"); ?></div> <!-- column break --> <div id="col2"><div id="col2inner"><h4 id="latestFromDSG">Latest from DSG</h4><div style='margin: 5px; padding: 0px; color: white; background-color: black;'><?php require_once('index_twitterfeed.php'); ?></div></div></div> </div></div><!-- end columns left and right --> <div style='margin: 5px; padding: 0px; border: 1px solid white;'><p style='color: white;'>Facebook comments area:</p></div> </div></body></html> body { background-color: black; text-align: center; }img { border: none; margin: 0; padding: 0; }a:visited { color: white; } #wrapper { width: 800px; margin: 0px auto; color: white; background-color: black; border: 1px solid red; text-align: left; padding: 0px 0px 0px 0px; height: auto; overflow: hidden;} #header { margin: 0px; padding: 0px; width: 100%; height: 141px; }#hcolumnLeft { float: left; width: 300px; background-color: blue; margin: 0px; padding: 0px; color: white; height: 141px; }#hcolumnRight { float: right; margin: 0px; padding: 0px; color: white; background-color: black; width: 500px; height: 141px; text-align: right; } #container2 { clear:left; float:left; width:100%; overflow:hidden; background: black; }#container1 { float:left; width:100%; position:relative; right:30%; background: black; }#col1 { float:left; width:70%; position:relative; left:30%; overflow:hidden; }#col2 { float:left; width:30%; position:relative; left:30%; overflow:hidden; } #latestFromDSG { font-size: 16px; margin: 0px 0px 10px; padding: 5px; background: #0100FE; }#col2inner { margin: 5px; padding: 0px; border: 1px solid white; background-color: black; } For some reason when I look at the CSS in Firebug I see that the facebook comments area thinks that it starts all the way at the top of #wrapper. This is not my intent at all. In fact my intent is to have the facebook comments area starting below the two column layout but still inside #wrapper. As usual with CSS trying to figure this out is not at all logical to me and not at all easy to understand. I see what the problem is but I really feel clueless on how to fix it. I had it in mind to upload a live copy to my server but for some reason I can not determine yet my PHP includes which are working fine on my IIS, PHP server are not working at all when I upload the files to CentOS 6, PHP server. Really I have to get the CSS right before I can figure out what is wrong with Cent OS. Thanks in advance for any help, comments or suggestions...
  11. I have designed a template in dreamweaver.Problem is that my links do not link when placed within the div "container".I can only get the links to work when the ap div that they reside inside is placed outside the "container" but then they don't scale with the page.Any advice would be appreciated. Thanks.
  12. Hi, I am working on a website for a client and using WordPress as my CMS to streamline the process and allow them to make updates themself. I am no stranger to wordpress or to CSS for that matter. But for some reason the theme I am using is doing something funky with the positioning of the page elements. I've been over and over the CSS so many times without finding the culprit that I feel like I'm taking crazy pills! The site is: www.easy2live.com/home This is the theme sample which functions correctly: http://themes.goodlayers.com/?theme=slideone The issue is this. The page headline, body copy and green page divider don't want to stick with the white content container which is to be its back drop. If you adjust the browser window the left navigation and white content container do as intended, but the elements I mentioned float around independently and fall out of alignment. Please take a look and let me know if you need any more information to trouble shoot this. Any and all input is greatly appreciated.
  13. Hi!to a previous post I had. I talked about having trouble centering a picture and being able to add links to the left of it because the links would be pushed down. I figured out that I need to do a container. Problem is, not sure how to style it in CSSI want my link menu to be to the left and I want my image to be centered. Do I have to do a complete HTML layout or can I just contain the image?How would I go about that code wise? I know in HTML I would put< div id="container"> or <div id="content">Any help would be appreciated. Thanks.
  • Create New...