The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> please help
xxkasperxx
post Oct 10 2011, 06:34 PM
Post #1


Serious Coder
*****

Group: Members
Posts: 261
Joined: 30-April 11
Member No.: 14,449
how can i get somthing like the orange bar on the top to fit all screen resolutions?


Attached thumbnail(s)
Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Oct 10 2011, 07:51 PM
Post #2


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
I'd use the approach shown here:
http://www.alistapart.com/articles/customcorners/
http://www.alistapart.com/articles/customcorners2/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Oct 11 2011, 01:43 AM
Post #3


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
Or use CSS3. Search for "css3 ribbon".
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
xxkasperxx
post Oct 12 2011, 03:24 PM
Post #4


Serious Coder
*****

Group: Members
Posts: 261
Joined: 30-April 11
Member No.: 14,449
i got the actual area to align, now i am having problems with the triangles.. please help..


HTML:

CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Kasper</title>
<link href="css/main.css" type="text/css" rel="stylesheet" />
<link href="css/nav.css" type="text/css" rel="stylesheet" />
<!--[if IE ]>
<link href="css/ie.css" type="text/css" rel="stylesheet" />
<![endif]-->
</head>
<body>
<div class="banner">
    <img src="images/kasper_banner.png" width="50%" />
</div>
<div class="triangle-l"></div>
<div class="triangle-r"></div>
<div id="area">
<div class="infobox-container">


<div class="infobox">
<h2>Site Navigaton</h2>
            <li>
                <ul><a href="index.html">Home</a></ul>
                <ul><a href="contact.html">Contact Us</a></ul>
                <ul><a href="charity.html">Charity</a></ul>
                <ul><a href="services.html">Services</a></ul>
                <ul><a href="about-us.html">About Us</a></ul>
            </li>
</div>
</div>



        <div class="content">
        
        <h1>Welcome</h1>
            <p>
                
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis urna dui, fringilla vel accumsan ut, convallis ac libero. Mauris porta vulputate magna, eget tempus ante consequat fringilla. Aenean eu diam in erat bibendum pretium id facilisis arcu. Curabitur lacinia imperdiet tellus sed placerat. Morbi facilisis, tellus vitae malesuada volutpat, enim libero mollis lacus, a venenatis diam tortor ut ligula. Fusce et est ut nisi pretium condimentum. Integer commodo luctus elit sit amet ullamcorper. Donec non nisi mi. Aenean consequat euismod sem ac consequat. *beep* sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent porta convallis dui. Donec est diam, sollicitudin sit amet auctor vel, lobortis vel sapien. Aenean sapien eros, fringilla id faucibus vel, cursus id lacus. Nulla lectus ipsum, cursus non vehicula ac, scelerisque at mi. Sed semper ullamcorper nisi, interdum blandit ligula volutpat in. Phasellus congue sapien quis felis mattis ultrices.
Proin imperdiet, purus sit amet fringilla scelerisque, magna mi venenatis lectus, nec facilisis risus tortor eleifend dolor. Donec commodo commodo metus. Etiam vel urna erat. Nunc ut orci vel mi malesuada imperdiet vel quis nulla. Integer mattis malesuada eros, eu convallis sem interdum ut. Sed ac pellentesque ipsum. Vivamus dapibus, lectus sed pulvinar blandit, lectus velit tincidunt purus, sit amet sollicitudin ante purus nec nulla. Etiam at sem ac turpis porttitor ullamcorper.
Curabitur vitae convallis turpis. In ac sapien vel tellus dignissim facilisis sagittis sit amet sem. Morbi aliquam, elit nec luctus convallis, quam enim rhoncus velit, vel mollis tortor urna at tortor. Etiam bibendum rhoncus purus, vel suscipit tellus placerat id. Duis sed lacus id elit sagittis congue. Curabitur interdum, nisi in pharetra posuere, purus ligula lobortis lectus, eu rutrum sem nisi vel felis. Integer dictum malesuada bibendum. Etiam eget sagittis nunc. Quisque faucibus orci a velit pulvinar in adipiscing leo gravida. Etiam commodo turpis sit amet nulla consectetur dapibus egestas lacus interdum. Nullam ac rhoncus orci. Integer cursus lacinia urna, sed adipiscing risus placerat ullamcorper. Quisque sodales libero sed neque sagittis faucibus. Morbi purus sapien, feugiat sit amet vehicula a, bibendum et urna. Duis tellus nulla, condimentum non fermentum at, mattis nec lectus. Donec pretium pretium porttitor.
Curabitur faucibus augue ac dui placerat eleifend. Suspendisse eu nunc at augue faucibus faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus pretium urna et diam dignissim eu elementum nisi aliquam. Fusce iaculis vehicula massa quis pretium. Donec cursus molestie sapien vitae eleifend. Nam eget vestibulum urna. Ut vel auctor nisi. Vivamus egestas nibh ut mi blandit aliquet. Suspendisse potenti.
Nullam eget mauris nulla, ut pharetra libero. Nulla mattis nulla eu lacus tempus rutrum. Donec pharetra porta diam. *beep* sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur eu tempor odio. Integer tincidunt viverra nibh, eget ullamcorper erat feugiat at. Donec consequat, enim non varius pulvinar, ante neque viverra metus, ac tempus lacus metus sed magna. Maecenas sapien ante, pretium sit amet dictum non, sodales sit amet libero. Fusce hendrerit ligula eget erat consectetur dapibus. Vivamus cursus porttitor arcu, ut porttitor enim congue non. Aliquam eu est tortor.
Integer ac nulla id neque gravida vulputate at sed est. Nulla erat augue, hendrerit ac ullamcorper eget, iaculis a dolor. Nulla mattis aliquam dui in bibendum. Nunc id dui lectus, eu malesuada magna. Phasellus sed mauris vitae elit ornare pellentesque a in eros. Nam lacus dolor, pharetra a luctus vel, aliquet id dolor. Donec nec nisi mi, vel convallis tortor. Nullam rhoncus nunc sed magna rutrum vel porta erat porta. Aliquam sit amet metus sit amet quam rhoncus tincidunt eu non lacus.
Nulla ac enim ut lorem iaculis venenatis vel id augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae convallis erat. Nulla ut odio a metus adipiscing condimentum vitae eu dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse nec dui sed ipsum viverra fringilla. Integer venenatis laoreet libero, sed auctor tellus suscipit in. Cras euismod, quam at faucibus porttitor, sapien velit dictum tortor, ac tempor neque turpis quis massa. Nunc vehicula justo volutpat mauris imperdiet convallis.
etra sed aliquam dolor vestibulum. In hendrerit hendrerit posuere. Quisque adipiscing sem vel nisl ornare at pellentesque lectus congue. Sed eros tellus, tincidunt nec faucibus a, mollis nec nibh. Duis interdum, est at fermentum mattis, nibh nulla molestie magna, sed vulputate augue lacus eu metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt nulla non quam sodales ac dignissim libero condimentum. Nulla odio ipsum, laoreet sed dapibus et, commodo in mauris. Donec venenatis dapibus hendrerit. Integer at massa tellus. Suspendisse potenti. Integer facilisis risus sit amet ligula vestibulum mollis. Nulla facilisi. Pellentesque tristique ornare turpis, ut pulvinar est laoreet luctus. Nullam arcu purus, suscipit in sagittis sed, elementum ac diam. Morbi diam lacus, tincidunt vel molestie in, dictum posuere libero.
            </p>
        </div></div>
            <div id="side">
                <h2>Newest Clients</h2>
                    <div class="images">
                        <img src="images/rappers.png" width="100%" />
                        <img src="images/charity.png" width="100%" />
                        <img src="images/weddings.png" width="100%" />
                    </div>
            </div>
            
</body>
</html>


CSS:
CODE

/* ----------------------------------------------------------  Page Defaults -------------------------------------------------------- */
* { margin: 0; padding: 0; }

html {
        font-size: 100%;

}
        
body {
    font-family:Arial, Helvetica, sans-serif;
    font-size:9pt;
    background-color:black;
}
        
p {
    line-height:1.6em;
}

h2 + strong {
    margin-top:10px;
    display:block;
}    

/* Heading Propeties */

h1 {
    font-family:monospace;
    border-bottom:solid #333;
    font-size:14pt;
    font-weight:bold;
    margin-bottom:1%;
    margin-top:1%;
}

h2 { /* in help with the lower h2 makes it look nicer */
    
    font-family:monospace;
    font-size:14pt;
    font-weight:bold;
    padding-left:2%;
    margin-bottom:1%;
    margin-top:1%;
    font-style: italic;
    font-weight: normal;
    line-height: 1.2em;
}




h5 {
    font-family:monospace;
    font-size:14pt;
    font-weight:bold;

}

.banner{
margin-top:0%;
text-align:center;
}


.content{
    float:right;
    background-color: #242424;
    width:60%;
    padding:10px;
    margin-right:5%;
    color:#666;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}


#side{
    
    background-color: #242424;
    width:20%;
    margin-left:6.4%;
    margin-top:25%;
    color:#666;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.images{
padding-top:5%;
padding-bottom:5%;
padding-left:5%;
padding-right:5%;
}
#area{
margin-top:5%;
}

/* --------------- Nav bar --------*/

.infobox-container {

    margin-left: 6.3%;
}
.infobox {
    position:absolute;
    background: #232323;
    color: #fff;
    float:left;
    z-index: 90;
    padding-top:1%;
    width:20%;
    -webkitborder-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
    -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
    box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
}
.infobox h2 {
    background: #d75106;
    width:107.5%;
    color: #222;
    padding-bottom:5%;
    font-family:monospace;
    padding-top:5%;
    margin-left: -4.8%;
    font-size: 160%;
    text-align: center;
    font-weight: bold;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fe841f), to(#e56800));
    background-image: -moz-linear-gradient(top,#fe841f,#e56800);
     float:left;
    z-index: 100;
}


.infobox li {
    padding-top:7%;
    padding-bottom:2%;
}
.infobox li a {
    text-decoration: none;
    display: block;
    padding: 0 20px;
    line-height: 40px;
    color: #666;
}
.infobox li a:hover{
    background-color: #2d2d2d;
    color: #999;
    width:50%;
}



.triangle-l {
    border-color: transparent #d75106 transparent transparent;
    border-style:solid;
    border-width:15px;
    float:left;
    margin-left:4.38%;
    margin-top:8.8%;
     -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
    -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
    box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
    
}
.triangle-r {
    border-color: transparent transparent transparent #d75106;
    border-style:solid;
    border-width:15px;
    position:absolute;
    margin-top:8.8%;
    margin-left:26.3%;
    z-index:0;
     -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
    -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
    box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
}


i have 2 pictures, one is how i want it to look(how it looks on 1680 x 1050) and the second one is how it looks on 1024 x 768. Please help me to get the triangles to align correctly in all resolutions.. I have eveything else fitting and resizeing i just cant fix the triangles to make it look 3d.


Attached Image

This post has been edited by xxkasperxx: Oct 12 2011, 03:25 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
xxkasperxx
post Oct 12 2011, 03:28 PM
Post #5


Serious Coder
*****

Group: Members
Posts: 261
Joined: 30-April 11
Member No.: 14,449
the second picture


Attached thumbnail(s)
Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
xxkasperxx
post Oct 14 2011, 08:10 PM
Post #6


Serious Coder
*****

Group: Members
Posts: 261
Joined: 30-April 11
Member No.: 14,449
can anyone please help me?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Oct 15 2011, 04:15 AM
Post #7


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
URL please?

You might have to use media-queries for different window sizes, resolution has nothing to do with that.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Graphics, Flash and Multimedia · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 16th April 2024 - 12:29 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC