WebDeveloper.com - CSS http://www.webdeveloper.com/forum/ Discussion and technical support relating to Cascading Style Sheets. en Mon, 20 May 2013 22:20:48 GMT vBulletin 60 http://www.webdeveloper.com/forum/images/misc/rss.png WebDeveloper.com - CSS http://www.webdeveloper.com/forum/ css http://www.webdeveloper.com/forum/showthread.php?278259-css&goto=newpost Mon, 20 May 2013 11:08:33 GMT hai, i am HTML learner so please help me How to create the css file? hai,

i am HTML learner
so please help me

How to create the css file? ]]> CSS packnmove http://www.webdeveloper.com/forum/showthread.php?278259-css <![CDATA[Chrome last <li> margin problem]]> http://www.webdeveloper.com/forum/showthread.php?278233-Chrome-last-lt-li-gt-margin-problem&goto=newpost Sun, 19 May 2013 20:24:21 GMT Hi, I've made 2 lists and on both the third element gets a margin on the top in chrome only.

Css
Code:
#service ul, #about ul, #footer ul{
    list-style-type: none;
    display: inline;
}
#service li{
    float: left;
    width: 312px;
    height: 285px;
    padding-left: 29px;
}
Heres the link as well: Test server

Help is much appreciated. ]]> CSS Jonas! http://www.webdeveloper.com/forum/showthread.php?278233-Chrome-last-lt-li-gt-margin-problem Creating identical header and footer http://www.webdeveloper.com/forum/showthread.php?278203-Creating-identical-header-and-footer&goto=newpost Sat, 18 May 2013 19:12:09 GMT Hey there friends. I am looking to add an identical repeat image to both the very top and bottom of the page. I added the image to the body {} tag and also the html {} tag. The problem is the body is set to 1000px width - so either the footer or header is limited to 1000 px width How do... Hey there friends.

I am looking to add an identical repeat image to both the very top and bottom of the page.

I added the image to the body {} tag and also the html {} tag.

The problem is the body is set to 1000px width - so either the footer or header is limited to 1000 px width

How do I make them both stretch the entire page??

Thanks in advance ]]> CSS phpnewbie34 http://www.webdeveloper.com/forum/showthread.php?278203-Creating-identical-header-and-footer Hide parent element from an iframe link http://www.webdeveloper.com/forum/showthread.php?278175-Hide-parent-element-from-an-iframe-link&goto=newpost Sat, 18 May 2013 08:32:26 GMT Hello,

I'm working on a project, and I need to find a solution to hide a DIV element by clicking on a link. The problem is that the DIV element is located in one window (parent window), while the link is located in another window (an iframe).

Here is the html code for the two pages:


index.html (parent window)
--------------------------------------------
<html>
<head><title>index</title></head>
<body>
<div id="element">element to be hidden</div>
<iframe src="iframe.html" width="320" height="40" frameborder="1" name="iframe"></iframe>
</body>
</html>


iframe.html (iframe window)
--------------------------------------------
<html>
<head><title>iframe</title></head>
<body>
<a href="">click here to hide the parent window element!</a>
</body>
</html>

If you could be as specific as possible with your solution, that would be great and much appreciated! I'm not skilled with JavaScript and CSS.

I searched Google for a few hours, but I couldn't solve the problem, even though my first guess is that this is a pretty simple thing to do. ;)

Anyhow, I noticed some were using a combination of JavaScript and CSS (display:none;) for cases close to this one.

Below you can find a small archive with the two pages listed above.

Thank you very much!
Attached Files
]]> CSS alexander2000 http://www.webdeveloper.com/forum/showthread.php?278175-Hide-parent-element-from-an-iframe-link <![CDATA[[HTML / CSS] Not so 100%.]]> http://www.webdeveloper.com/forum/showthread.php?278165-HTML-CSS-Not-so-100-.&goto=newpost Sat, 18 May 2013 01:29:19 GMT SO I'm working on a website and want a backdrop that stretches 100%.

I have looked all over for a code to do so, and have successfully found one that stretches 100%... Of the screen size, and then stops.

What do I mean?

Simply put, if my screen is 1024px high... The code will stretch that element to 1024px and then stop. So if the page ends up scrolling, the background will stretch to the bottom of the first page, but as you scroll into the second page, you lose the backdrop.

Here's what I'm using for HTML:

HTML Code:
<div id="backdrop">
<div id="content" align="center">
<br>
<img src="img/IGNiTE.png" width="171" height="127" alt="IGNiTE Homepage">
<br>
<div id="nav">



</div>

<div id="middle">

If this content box extends into a second page, the backdrop ends at the end of page 1!

</div>

</div>
</div>
And CSS:
Code:
html, body {
        min-height: 100%;
        height: 100%;
}
html {
        background: url(img/bg.png) fixed;
        width: 850px;
        margin: 0 auto;
}

body {
        width: 850px;
        margin: 0 auto;
}

div#backdrop {
        background: #2c0000 fixed;
        width: 850px;
        margin: 0 auto;
        height: 100%;
}
div#content {
        background: #000 fixed;
        width: 830px;
        height: 100%;
        margin: 0 auto;
        overflow: visible;
}
#nav {
        background: url(img/nav.png);
        width: 792px;
        height: 35px;
}
#middle {
        background-color: #111111;
        border: 2px solid #666;
        width: 800px;
        margin-top: 10px;
        margin-bottom: 10px;
}

.split {
        margin-top: 5px;
}
.nav {
        margin-top: 5px;
}
Any ideas? ]]> CSS DannLea http://www.webdeveloper.com/forum/showthread.php?278165-HTML-CSS-Not-so-100-. row image swap dont click http://www.webdeveloper.com/forum/showthread.php?278163-row-image-swap-dont-click&goto=newpost Sat, 18 May 2013 00:27:32 GMT Hi, I have code that has links in a row and swaps images. This was an ordeal to say the least. The images dont resize as i thought on browser resize so I had to use media queries to alter size of these images. Can I get the images to resize without adding media queries? Hi,

I have code that has links in a row and swaps images.
This was an ordeal to say the least.

The images dont resize as i thought on browser resize so I had to use media queries to alter size of these images.

Can I get the images to resize without adding media queries?



Code:
img, embed, object, video {

  max-width: 100%;
 
}

ul.nav
{
    list-style-type: none;
    padding: 0;
    margin: 0;
    float: left;
   
}


.nav li#welcome a {
        background-image:url(images/ic1.png);
  background-repeat: no-repeat;
       
        }
.nav li#welcome a:hover {
        background-image:url(images/ic1b.png);
  background-repeat: no-repeat;
 
 
  }

.nav li#welcome2 a {
        background-image:url(images/ic1.png);
  background-repeat: no-repeat;
       
        }
.nav li#welcome2 a:hover {
        background-image:url(images/ic1b.png);
  background-repeat: no-repeat;
 
  }
 .nav li#welcome3 a {
        background-image:url(images/ic1.png);
  background-repeat: no-repeat;
       
        }
.nav li#welcome3 a:hover {
        background-image:url(images/ic1b.png);
  background-repeat: no-repeat;
 
 
  }

.nav li#welcome4 a {
        background-image:url(images/ic1.png);
  background-repeat: no-repeat;
       
        }
.nav li#welcome4 a:hover {
        background-image:url(images/ic1b.png);
  background-repeat: no-repeat;
 
  }
 
 
#head ul li a
        {
        text-decoration: none;
       
        float:left;
        margin-right:40px;

        }

#head ul li
{
    display: inline;
       

 }
#head img
{
      max-width: 100%;

 }


#head ul
{
/*margin-left: 15%;*/
padding:0;

list-style-type: none;

border:none;

}       



@media screen and (min-width: 960px)
{
        ul.nav a{  height: 100px; width: 100px;}
}

@media screen and (max-width: 959px)
{
        ul.nav a{  height: 50px; width: 50px;}
}

</style>
</head>

<body>

lkjl
<div id="head">
  <ul class="nav">
    <li id="welcome"><a href="home.html"></a></a></li>
    <li id="welcome2"><a href="home.html"></a></a></li>
      <li id="welcome3"><a href="home.html"></a></a></li>
    <li id="welcome4"><a href="home.html"></a></a></li>
  </ul>
</div>
]]> CSS jagguy http://www.webdeveloper.com/forum/showthread.php?278163-row-image-swap-dont-click CSS only work sometimes http://www.webdeveloper.com/forum/showthread.php?278091-CSS-only-work-sometimes&goto=newpost Thu, 16 May 2013 13:16:24 GMT Hello all!

I am having a tiny bit of trouble with CSS and a link style. I want it to have inline-block, which does work on some pages but on other it just won't show.

It shows the text as white, which is set in the link style class of the CSS:

Code:
.link-style {
        display: inline-block;
        margin-top: 10px;
        padding: 5px 15px;
        background: #000000;
        letter-spacing: 1px;
        text-decoration: none;
        color: #FFFFFF;
}
As said it does read the color and I can change the text color from white to black, but it just won't show the inline-block. It shows the block on the index page but once I go to profile page it just won't show it.

The index.php:
Code:
<?php session_start(); ?>
<html>
<head>
<!-- Set fonts and charset plus general information of the site -->
<title>Welcome to ******</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<!-- Using googles fonts and the css file -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600" rel="stylesheet" type="text/css" />
<link href="css/css.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<!-- The whole wrapper around the site -->
<div id="wrapper">
        <!-- Start header -->
        <div id="header">
                <div id="logo">
                        <!-- Ready for text on top picture -->
                </div>
        </div>
        <!-- Start login info -->
        <div id="login">
            <?php
                //$member = unserialize($_SESSION['member']);
               
                if ( isset($_SESSION['member_id']) )
                {
                    printf("Welcome %s (%s %s)! <a href='logout.php'>Sign out</a>", $_SESSION['username'], $_SESSION['first_name'], $_SESSION['last_name']);
                }
               
                else
                {
                    printf('<a href="login.php">Login</a>');
                }
            ?>
        </div>
        <!-- Start menu -->
        <div id="menu-wrapper">
                <div class="ribbon ribbon-content">
                        <div id="menu">
                                <ul>
                                        <li class="current_page_item"><a href="index.php">Home</a></li>
                                        <li><a href="profile.php">Profile</a></li>
                                        <li><a href="tournaments.php">Tournaments</a></li>
                                        <li><a href="gyms.php">Gyms</a></li>
                                </ul>
                        </div>
                </div>
        </div>
        <!-- start content -->
        <div id="columns">
                <div class="content">
                        <!-- post news -->
                        <div id="column1">
                            <?php
                               
                                //Sample button for admins
                                if ( isset ($_SESSION['member_id']) )
                                {
                                    include_once 'php/Role.php';
                                   
                                    $memberrole = new MemberRoleController();
                                    $roles = $memberrole->getRolesByMemberID($_SESSION['member_id']);
                                   
                                    foreach ( $roles as $role )
                                    {
                                        if ( $role->role === "Admin")
                                        {
                                            echo '<p><a href="write_news.php" class="link-style">Write new news</a></p>';
                                        }
                                    }
                                }
                               
                                //include the news.php file for showing and publishing news
                                include 'php/News.php';
                               
                                $NewsController = new NewsController();
                                $newsarray = $NewsController->getNews(3);
                               
                               
                                //Publish news on the front page
                                foreach ($newsarray as $news)
                                {
                                    printf('<h2>%s</h2>
                                    <p><img src="%s" width="680" height="200" alt="" /></p>
                                    <p>%s - %s</p>', $news->headline, $news->Image, $news->date, $news->content);
                                }
                                    unset($NewsController);
                                echo '<p><a href="all_news.php" class="link-style">More...</a></p>';
                            ?>
                        </div>
                        <!-- Start lastest fights -->
                        <div id="column2">
                        <?php
                            include_once 'php/latestFights.php';
                        ?>
                        </div>
                </div>
        </div>
        <!-- Footer for copyright notice -->
        <div id="footer">
                <p>Copyright &copy; Uni group Bi405F13</p>
        </div>
</div>
</body>
</html>
You can view the page on http://p4.bitbender.dk, here the index file works fine, and in "latest fights" it does show the inline block.

Now the profile code:
Profile code in next post can't post more than 1k chars...

The page is here: http://p4.bitbender.dk/profile.php

here it won't show the inline block, but it still reads that the text color should be white, and I can change that to black.

Furthermore, if I right click on where the box should be and press "Expect element" (FireFox) I can review the CSS code. If I go down to the link style CSS code here, there is an inline of the line where it writes "display: inline-block;" but that does not happen on any of the other pages.

How come I can't get it to show the inline block?

This is my very first time I ever try CSS/HTML/PHP so there might be something weird happening. If you need more information please tell and I'll be happy to share them.

If you want to try the login on the profile page I have created a user:
username: Weee
password: weee

Thanks in advance! ]]> CSS Jelle http://www.webdeveloper.com/forum/showthread.php?278091-CSS-only-work-sometimes cant resize images http://www.webdeveloper.com/forum/showthread.php?278085-cant-resize-images&goto=newpost Thu, 16 May 2013 12:17:45 GMT Hi, When I resize my webpage, the row of 4 images in the heading dont resize and they go on another line. I just want the images to reduce in size as the browser reduces. http://www.mymrt.net/ComputerTraining/comptest.html Hi,

When I resize my webpage, the row of 4 images in the heading dont resize and they go on another line.
I just want the images to reduce in size as the browser reduces.

http://www.mymrt.net/ComputerTraining/comptest.html ]]> CSS jagguy http://www.webdeveloper.com/forum/showthread.php?278085-cant-resize-images Css drop down menu not working correctly http://www.webdeveloper.com/forum/showthread.php?278053-Css-drop-down-menu-not-working-correctly&goto=newpost Wed, 15 May 2013 23:47:57 GMT I am trying to use a basic css drop down menu as it would allow me to add pages to my site easily and expand it in the future with no real problems. I found a nice script but some of the things I can't get quite placed how I want them.

I am trying to move the slider right up against the nav bar, I am sure I put a massive padding bottom on something when I was playing around with it.
The nav menu doesn't overlap the slider, would using stack overflows be away around this.
I am also trying to move the social network buttons in line with the nav bar.
The links don't center despite me using margin 0x auto; through out the nav links
When I move onto subcategories the main link disappears
I was also trying to make the black line go right up the side of the links not begin half way down and stretch too far down.
I have been playing around with it for hours and its not too far away but I couldn't get round these obstacles.

The website is www.cherrietestingwebsite.org

Thanks. ]]> CSS delboy1875 http://www.webdeveloper.com/forum/showthread.php?278053-Css-drop-down-menu-not-working-correctly Site Not Expanding With Browser http://www.webdeveloper.com/forum/showthread.php?278047-Site-Not-Expanding-With-Browser&goto=newpost Wed, 15 May 2013 20:58:33 GMT Hello.
So I posted this yesterday, and thought I figured it out. Can anyone tell me what is happening here? If you shrink the browser to a couple hundred pixels wide, and then scroll right you will see what is happening.

http://brookelynperry.com/dev/header.php

I can't seem to figure this out. ]]> CSS andy.richin http://www.webdeveloper.com/forum/showthread.php?278047-Site-Not-Expanding-With-Browser padding issues in Chrome http://www.webdeveloper.com/forum/showthread.php?278045-padding-issues-in-Chrome&goto=newpost Wed, 15 May 2013 20:18:06 GMT okay so my page renders the way i need it as in the attached image where the table rows are the same height when I take out the padding, but it renders with one row shorter than the other, like in the other image when I put the padding in.. what am I missing? this is only happening in Chrome and... okay so my page renders the way i need it as in the attached image where the table rows are the same height when I take out the padding, but it renders with one row shorter than the other, like in the other image when I put the padding in.. what am I missing? this is only happening in Chrome and only on my wifes monitor, not mine, the 'untitled.jpg' is how it appears in all other browsers (in respect to alignment) regardless of whether or not i put padding in... the weird thing is, I'm usually having problems with IE, not Chrome. the reason I'm so concerned is because since people have different resolution monitors I'm willing to bet her computer is not the only one where it would display the wrong way. here is my code

Code:
#bg {position:fixed; width:100%; height:100%; left:0px; top:0px; z-index:-1;}
#mainbar {position:absolute; width:98%; top:8%; height:26%; background-color:rgba(0, 0, 0, 0.5);
    border-radius:50px 0px 50px 0px; border: solid 3px #df8100;}
#navtable {position:absolute; top:2%; left:1%; width:95%; height:98%; border-collapse: separate;
      border:1px white solid;}
#navtable tr td{border-radius:40px 0px 40px 0px;
      font-size:27px; text-align:center; font-weight:bold;}
#heading {color:orange; font-size:195%; position:relative; top:-15px;
      font-weight:bold; font-family:cursive; opacity:0.98; filter:alpha(opacity=98);}
#navtable tr td {width:17%; border:white solid 1px;}
      a {color:#a41b13; text-decoration:none; background-color: #ffe188; padding:5px; }

HTML Code:
<img id='bg' src='mypics/tmp5head.jpg' />
        <div id='mainbar'>
            <table id='navtable'>
                <tr>
                    <td rowspan='2' style='width:45%; text-align:center;'>
                        <font id='heading'>YOUR WEBSITE</font>
                    </td>
                    <td><a href=''>STORE</a></td>
                    <td><a href=''>PRINTS</a></td>
                    <td><a href=''>SKETCHPAD</a></td>
                </tr>
                <tr>
                    <td ><a href=''>CONTACT</a></td>
                    <td ><a href=''>GALLERY</a></td>
                    <td ><a href=''>REQUESTS</a></td>
                </tr>
            </table>
        </div>
EDIT: Now it's appearing the wrong way whether or not padding is there.. weird.. i did find out that the difference is the screen resolution.. how to adjust my code to work in different resolutions in this case?
Attached Images
]]> CSS thewebiphyer http://www.webdeveloper.com/forum/showthread.php?278045-padding-issues-in-Chrome Navigation bar not quite working properly http://www.webdeveloper.com/forum/showthread.php?278017-Navigation-bar-not-quite-working-properly&goto=newpost Wed, 15 May 2013 13:26:28 GMT I am trying to use a basic css drop down menu as it would allow me to add pages to my site easily and expand it in the future with no real problems. I found a nice script but some of the things I can't get quite placed how I want them.

I am trying to move the slider right up against the nav bar, I am sure I put a massive padding bottom on something when I was playing around with it.
The nav menu doesn't overlap the slider, would using stack overflows be away around this.
I am also trying to move the social network buttons in line with the nav bar.
The links don't center despite me using margin 0x auto; through out the nav links
When I move onto subcategories the main link disappears
I was also trying to make the black line go right up the side of the links not begin half way down and stretch too far down.
I have been playing around with it for hours and its not too far away but I couldn't get round these obstacles.

Thanks. ]]> CSS delboy1875 http://www.webdeveloper.com/forum/showthread.php?278017-Navigation-bar-not-quite-working-properly At loss in web design http://www.webdeveloper.com/forum/showthread.php?277993-At-loss-in-web-design&goto=newpost Wed, 15 May 2013 04:41:09 GMT First i would like to state i know i make alot of errors but plese bare with me. here is my issue i am a developer meaning i do C++,php,javascript and that is what i really like being able to use logic to solve problems but recently i thaught to give the freelance thing a try(im 17). Thing id... First i would like to state i know i make alot of errors but plese bare with me.


here is my issue i am a developer meaning i do C++,php,javascript and that is what i really like being able to use logic to solve problems but recently i thaught to give the freelance thing a try(im 17). Thing id thogh i am not new to html and or css and how they are used i just cannot seem to get my sites to look great and trust me i have read alot to help. what makes it worse i see sites that i know take less effort than what i do but by far look better. i use to think if i knowed how to get all my divs where i wanted them i could do anything seems i was wrong.

I mostly do raw codeing but have tried photoshop and hated it, tried fireworks and love it(well it makes doing the layout easier than refreshing the page in notedpad or dreamweaver)


nuwebdesinz-examples.netii.net/snow/
nuwebdesinz-examples.netii.net/blog/

those are some that i have alredy done

can any great deigner or decent handcoder help me out what is it i need to improve or is it something i just dont have.

i alse have 2 screenshots of things i have done please help
Attached Images
]]> CSS zanda http://www.webdeveloper.com/forum/showthread.php?277993-At-loss-in-web-design <![CDATA[[RESOLVED] Site Not 100 Percent With Browser]]> http://www.webdeveloper.com/forum/showthread.php?277971-RESOLVED-Site-Not-100-Percent-With-Browser&goto=newpost Tue, 14 May 2013 20:31:52 GMT I am having some issues with a site that I am building and it expanding the width of the browser. For instance, if my browser window is set to 1500px, a scrollbar will appear at the bottom allowing you to scroll right. Once you scroll right the site is cut off and there is only white space. The... I am having some issues with a site that I am building and it expanding the width of the browser. For instance, if my browser window is set to 1500px, a scrollbar will appear at the bottom allowing you to scroll right. Once you scroll right the site is cut off and there is only white space. The site should be 100% and the content is 960px with a 10px padding on the left and right. Here is my example:

http://brookelynperry.com/dev/

Any suggestions? ]]> CSS andy.richin http://www.webdeveloper.com/forum/showthread.php?277971-RESOLVED-Site-Not-100-Percent-With-Browser Styling a social network plugin http://www.webdeveloper.com/forum/showthread.php?277949-Styling-a-social-network-plugin&goto=newpost Tue, 14 May 2013 12:33:02 GMT Hey I recently implemented a twitter plugin that I found on my personal trainers website. I really like the plugin, it seems to load fast and work well. I found that the fb like box for some reason added a lot of load time onto my page so decided against implementing it and I can integrate both... Hey I recently implemented a twitter plugin that I found on my personal trainers website. I really like the plugin, it seems to load fast and work well. I found that the fb like box for some reason added a lot of load time onto my page so decided against implementing it and I can integrate both via the twitter plugin anyhow. The only problem is it has of courses been styled using css and I couldn't find the necessary coding to style the widget. It is quite a large site and well beyond my level of expertise. I was wondering if anyone knew how I could style it. Also it has affected the divs on my homepage too.

The website I took the widget from was

http://www.mikeheatlie.com/

The website homepage I am trying to implement it on is

http://www.cherrietestingwebsite.org/

Any help as always is appreciated as it is beyond my level of expertise if I am being honest ]]> CSS delboy1875 http://www.webdeveloper.com/forum/showthread.php?277949-Styling-a-social-network-plugin