Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Minor css issues (or a pain to solve?)

    Hi everybody

    So I have created a basic website layout in css. I'm not very experienced yet.
    I was wondering why isn't border-radius working? I want to make rounded corners, but when i set border-top-left-radius, nothing happens. Or when i try to set border-buttom-left-radius, nothing happens there either. I know you have to set it to 5px etc. So what i've done is set border-radius (makes all 4 corners rounded as you know) and then set buttom left and right to 0. That's hardly the right way to do it...Also, I want to make it possible for the users to change the colors of the page (with JS), but my question is do i have to change all divs to ids (#) instead of classes to use JS, because in JS you write something like document.getElementById...

    Finally, here's the code...

    Code:
    <! DOCTYPE html>
    <html>
    <head>
    
    <title></title>
    
    <style>
    
    .container
    
    {
    	width:auto;
    	height:2160px;
    	
    
    }
    
    body
    
    {
    background-color:gray;
    
    }
    
    
    .content {
    	
    	position:relative;
    	width:80%;
    	height:90%;
    	background-color:#2590ae;
    	left:17%;
    	top:8%;
    
    	 /* Setting individual border-readii would not work, set all border radii instead...*/
    	border-top-right-radius:0px;
    	border-top-left-radius:0px;
    	border-buttom-left-radius:0px;
    	border-buttom-left-radius:0px
    	}
    	
    .paragraph
    
    {
    position:absolute;
    background-color:gray;
    left:4%;
    top:4%;
    width:80%;
    padding-left:4%;
    padding-right:4%;
    
    
    border-radius:5px; 
    /*Don't leave any underfined tags or following values wont work!*/
    
    
    }
    
    
    	
    	
    	
    .bgcontent
    {
    	
    	position:relative;
    	width:99%;
    	height:92%;
    	background-color:#333333;
    	left:0.5%;
    	top:1%;
    	
    	border-radius:5px;
    }
    	
    	
    .leftmenu {
    	
    	position:absolute;
    	height:90%;
    	width:15%;
    	background-color:#139fa5;
    	top:8%;
    	left:2%;
    	border-radius:5px;
    	border-top-left-radius:0px;
    	border-top-right-radius:0px;
    	border-buttom-right-radius:0px;
    	
    }
    
    
    .nav
    
    
    	{
    	position:absolute;
    	top:2%;
    	height:6%;
    	width:95%;
    	background-color:#2cabe2;
    	left:2%;
    	border-radius:5px;
    	border-buttom-left-radius:0;
    	border-buttom-right-radius:0;
    	}
    
    a.navlink1, .navlink2, .navlink3, .navlink4, navlink5, .navlink5
    	{
    	position:relative;
    	text-decoration:none;
    	display:block;
    	background-color:green;
    	left:2%;
    	padding-right:5%;
    	padding-top:1%;
    	padding-buttom:5%;
    	top:50px; /*Precent units didn't work. Why???*/
    	border-radius:50px,50px;
    
    	
    
    	
    	
    	
    	display:inline;
    
    	}
    
    li
    
    {
    
    display:inline;
    padding-top:%;
    padding-buttom:2%;
    top:2%;
    
    }
    
    ul
    {
    list-style-type:none;
    margin:0;
    padding:0;
    padding-top:6px;
    padding-bottom:6px;
    
    }
    .footer {
    
    
    position:absolute;
    width:98%;
    left:1%;
    background-color:#333333;
    float:left;
    z-index:1;
    height:15%;
    top:2021px;
    border-radius:5px;
    
    
    
    }
    
    </style>
    </head>
    <body>
    <div class="container">
    <div class="footer"></div>
    <div class="bgcontent">
    
    <div class="content">
    <div class="paragraph">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta vestibulum tellus, ut interdum dui adipiscing et. Pellentesque eget turpis diam. Vestibulum sapien dolor, facilisis a urna in, molestie hendrerit odio. Fusce fermentum euismod ipsum, ac ullamcorper quam hendrerit sit amet. Duis mollis sed velit eu faucibus. Integer pharetra feugiat lorem a ultrices. Mauris aliquam ligula urna, ac lacinia turpis porta eget. Sed ullamcorper volutpat mattis. In eu enim id nisi faucibus vestibulum vel vitae quam. Nulla ac tortor eget lorem eleifend mollis. Nulla rutrum non quam non laoreet.</p>
    
    
    
    </div>
    
    
    </div> <!--Closed bgcontent div, that fixed border-tag attribute "buttom" from not working.-->
    
    <div class="nav">
    <ul type="none">
    <li><a class="navlink1" href="http://">About</a></li>
    <li><a class="navlink2" href="http://">Tutorials</a></li>
    <li><a class="navlink3" href="http://">Gallery</a></li>
    <li><a class="navlink4" href="http://">Contacts</a></li>
    <li><a class="navlink5" href="http://">Links</a></li>
    </ul>
    </div>
    
    
    
    
    <div class="leftmenu"></div>
    
    	
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>

  • #2
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    369
    Thanks
    2
    Thanked 26 Times in 26 Posts
    border-radius does not work in all browsers. IE prior to IE9 and any IE browser in compatibility mode will ignore it. If you are having a problem in a browser that should be supporting border radius then post a link to the page so I cando diagnostics.

    as for needing to reference element styles by id that ids not always necessary

    document.getElementsByClassName('class') will return an array of all elements for the specified class and
    document.getsElementsByTagName('tag') will return an array of elements with the specified tab.

    This reference to DOM properties and methods might help you.
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&

  • #3
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hi and thanks for your help so far. Yes, I use Chrome which should be the most modern and supporting everything...Here's a the link to JSfiddle, this is what my page looks like. You can see its not very precisely made though so thats why I'm most likely having these errors. I have time today so I will scan the code through myself, too.

    Thanks for the javascript tip. Also i was feeling a bit hopeless when i posted this question. But if you have some time, it would be helpful if you could take a brief look too.

    -Me-

  • #4
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    ...forgot the link:

    http://jsfiddle.net/YUask/m5njB/

  • #5
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,138
    Thanks
    7
    Thanked 257 Times in 256 Posts
    I've never figured out how to debug with jsfiddle, but I do note that you've mis-spelled "bottom" as "buttom" in several places. Not sure if that's the issue you're trying to correct though.

  • #6
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    369
    Thanks
    2
    Thanked 26 Times in 26 Posts
    Yeah jsfiddle is fine for showing how something works but it is worthless for doing diagnostics because the code is mounted in the fiddle page which gets in the way. We really need a link to the live page to be able to do diagnostics.

    BTW, Chrome is not the most modern browser; Firefox is. A very large number of features that Chrome claims to "support" are actually -webkit- hacks. Firefox supports more CSS3 and HTML5 natively, though they also use some -moz- hacks. Plus Chrome has more bugs (not to standard or broken) than Firefox.

    Cd&
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&

  • #7
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ah, thank you tracknut...It may be a bad excuse but English isn't my native language...I payed no attention to the spelling of "bottom", somehow I didn't notice it...

  • #8
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Maybe i'm just saying an obvious thing (edit: talking about JSfiddle. Another great one is scratchpad.io, same guys who made Brackets(?) )but you can extend the html section (top left) by dragging. It will nearly cover the whole page. Also you can draw it down. And although it says css here and JS there you can copy (or write) the style rules to the html section and just add the <html> and <style> tags and it'll work just fine.

    Also, have you heard about Brackets live editor? All you need is to have the browser open in the background, make the changes to your html and press ctrl + s save and the page will be refreshed. No need to hit refresh in browser. It also completes brackets and closes tags.

    Many thanks for your help, again.
    Last edited by Somehelpplz; 11-21-2013 at 11:35 AM.

  • #9
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    369
    Thanks
    2
    Thanked 26 Times in 26 Posts
    Editors and simulators have their place in the toolbox, but diagnostic tolls need the real page, with anything getting in the way to alter results, mask errors, or apply local formatting.

    Creation and debugging only needs two tools, a straight text editor, and the target browser.

    Cd&
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •