The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Help building 4 columns according to the picture
Angie333
post Jan 16 2014, 08:00 PM
Post #1


Advanced Member
****

Group: Members
Posts: 101
Joined: 16-January 14
Member No.: 20,243



IPB Image

Can someone please help me to build this type of 4 columns adding images on each corner of the column to form a mirror shape.
I tried so many times but nothing only more mistakes and stress, it has been a week now I've been trying and looking through
google there is not even one layout like this. Please Help me I would appreciate it a lot!
The overall width of the content of the page is about 940px the idea is to center this four columns and leave a bit of space around the corners.

I'm quite new to this.


this is the html code I did but it's wrong.

CODE
    <div id="column1" style="float:left; margin:0px;margin-left: 20px; width:425px;"><img src="images/M.png" width="105" height="130"  style="float:right; margin:-80px;margin-right: -25px;">
      <div style="background-color: #181818; height: 50px;"><p> </p><h1 align="left"> ART</h1> <p> </p></div></div>

    
<div id="column2" style="float:right; margin-top:50px;margin-right:15px;  width:425px;"><img src="images/MN.png" width="105" height="130"  style="float:left; margin-top:-129px;margin-left:-15px;">
      <div style="background-color: #181818; height: 50px;"><h1 align="right">SCULPTURE  </h1> <p> </p></div></div>


<div id="column1" style="float:right; margin:0px;margin-right:0px; width:403px;border:thin solid #D8D8D8; padding:10px;">
      <div style="background-color: #F8F8F8; height: 800px;"></div></div>

and the CSS:

CODE
<style type="text/css">



    #left {border: 1px solid lightgray;}
    {
      
      width: 350px;
      float: left;
    
    }

    #right
    {
      
      width: 350px;
      margin-left: 0px; /* Change this to whatever the width of your left column is*/
    
     }

    .clear
    {
      clear: both;
    }
  </style>


This post has been edited by Angie333: Jan 16 2014, 08:02 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jimlongo
post Jan 17 2014, 12:37 AM
Post #2


This is My Life
*******

Group: Members
Posts: 1,128
Joined: 24-August 06
From: t-dot
Member No.: 16



There's a few ways to look at it I suppose.
It looks to me more like 2 columns 3 rows.
Here's a simple example of the concept. Check the source for the idea.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Angie333
post Jan 17 2014, 09:29 AM
Post #3


Advanced Member
****

Group: Members
Posts: 101
Joined: 16-January 14
Member No.: 20,243



it's great but is there a way to make the column 2 with the bottom column 4 lower in height then column 1and4 (just like the picture)? also how can this be done? code wise dont have a clue how to do it sad.gif

This post has been edited by Angie333: Jan 17 2014, 09:29 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jimlongo
post Jan 17 2014, 07:58 PM
Post #4


This is My Life
*******

Group: Members
Posts: 1,128
Joined: 24-August 06
From: t-dot
Member No.: 16



I'm sure there's other ways using floats and clears, but try it again.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Angie333
post Jan 17 2014, 08:54 PM
Post #5


Advanced Member
****

Group: Members
Posts: 101
Joined: 16-January 14
Member No.: 20,243



I´m trying but it´s not coming out please help me to make it like the picture, please, I´ve been trying for a week now, you are an expert in css and the example you did is amazing!
Please I beg you sad.gif I really need your help in this.

This post has been edited by Angie333: Jan 17 2014, 09:31 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jimlongo
post Jan 17 2014, 10:54 PM
Post #6


This is My Life
*******

Group: Members
Posts: 1,128
Joined: 24-August 06
From: t-dot
Member No.: 16



just view the source of the example. The html and css is all there.

CODE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Untitled</title>
<style type="text/css" title="text/css">
<!--
body{background:blue;}
#container{width:1000px;padding-top:14px;height:590px;margin-right:auto;margin-left:auto;background:lightcyan;}
#inner_container{width:940px;margin-top:20px;margin-right:auto;margin-left:auto;}
#upperLeft {width:468px;height:100px;border:1px solid black;background:white;float:left;}
#upperRight {width:468px;height:140px;border:1px solid black;background:white;float:right;}
#midLeft {width:470px;height:40px;background:black;float:left;}
#midRight {width:470px;height:40px;background:black;float:right;}
#lowerLeft {width:468px;height:400px;border:1px solid black;background:white;float:left;}
#lowerRight{width:468px;height:360px;border:1px solid black;background:white;float:right;}
--></style>
</head>
<body>
<div id="container">
    <div id="inner_container">
        <div id="upperLeft">
            <img src="faceLeft.jpeg" width="" height="140" alt="" style="position:relative;z-index:999;float:right;overflow:visible;"> Upper Left box
        </div>
        <div id="upperRight">
            <img src="faceRight.jpeg" width="" height="140" alt="" style="float:left"> Upper Right Box
        </div>
        <div id="midLeft">
            <p style="color:white">
                Middle Left Box
            </p>
        </div>
        <div id="midRight">
            <p style="color:white">
                Middle Right Box
            </p>
        </div>
        <div id="lowerLeft">
            Lower Left Box
        </div>
        <div id="lowerRight">
            Lower Right Box
        </div>
    </div>
</div>
</body>
</html>


This post has been edited by jimlongo: Jan 17 2014, 10:57 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Angie333
post Jan 18 2014, 09:49 AM
Post #7


Advanced Member
****

Group: Members
Posts: 101
Joined: 16-January 14
Member No.: 20,243



I have checked the source code and used it on a new html to see it and changed a few settings to make the structure look more like
the picture


http://jsfiddle.net/NDSz2/

the issue is placing the images according to the picture, for example one image inside one black column and the other one on top the second black column


IPB Image

This post has been edited by Angie333: Jan 18 2014, 09:51 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jimlongo
post Jan 18 2014, 11:55 AM
Post #8


This is My Life
*******

Group: Members
Posts: 1,128
Joined: 24-August 06
From: t-dot
Member No.: 16



I did that by making the picture's style display:relative and then adding a z-index to it. That way it should be in front of other elements.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Angie333
post Jan 18 2014, 04:25 PM
Post #9


Advanced Member
****

Group: Members
Posts: 101
Joined: 16-January 14
Member No.: 20,243



Amazing work, I´m sorry I looked in the previous one before this last code, just one thing I have one last issue with this,the content and the columns are covering all the content page (940px) without leaving a bit of space on each corner of the page. How can this be fixed? the moment I try to change something the layout of the columns go all over the page. I dont know much about css sad.gif


IPB Image

This post has been edited by Angie333: Jan 18 2014, 04:29 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jimlongo
post Jan 18 2014, 04:34 PM
Post #10


This is My Life
*******

Group: Members
Posts: 1,128
Joined: 24-August 06
From: t-dot
Member No.: 16



I believe I have a container with a cyan background that is 1000px wide centered on the page.

Inside that there is a centered inner_container that is 940px wide. This container holds all the boxes.

That would leave (1000 - 940/2) = 30px of the container visible on each side of the inner_container.

Of course if the viewport is smaller than 1000 you won't see all of that.

You're going to have to figure out the rest. Use the Inspect Element tools in your browser to play around with the divs and see what happens when you make changes.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Angie333
post Jan 18 2014, 04:50 PM
Post #11


Advanced Member
****

Group: Members
Posts: 101
Joined: 16-January 14
Member No.: 20,243



but for instance http://jsfiddle.net/NDSz2/ shows exactly the perfect size that leaves a bit of space on each corner of the content page, somehow I see this will be long till it fits.

Anyway,I´ll figure it out somehow, Thank you for all your help and time with this, trust me not many would help these days, you are genius and you cracked the code!! Thank you so much!!! smile.gif

This post has been edited by Angie333: Jan 18 2014, 04:51 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jimlongo
post Jan 18 2014, 05:06 PM
Post #12


This is My Life
*******

Group: Members
Posts: 1,128
Joined: 24-August 06
From: t-dot
Member No.: 16



The fiddle is a whole different arrangement isn't it. you have an additional lower-mid div inside one of the others.

Anyway the margins there expand as the page changes size.

Good luck, and study hard.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Angie333
post Jan 18 2014, 06:36 PM
Post #13


Advanced Member
****

Group: Members
Posts: 101
Joined: 16-January 14
Member No.: 20,243



Somehow I managed to give the spaces by reducing each column. Glad as a bird, this is just the beginning, still need to do the entire site.

You are absolutely right ! I will need to learn the css though it will take some time.

Thank you so much for everything, it was really kind of you and I truly appreciate it! Take care smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Angie333
post Jan 19 2014, 12:40 PM
Post #14


Advanced Member
****

Group: Members
Posts: 101
Joined: 16-January 14
Member No.: 20,243



I'm sorry if I'm barging again , one last question that for me is also very imporant sad.gif would appreciate it a million if you can help me.
I lightened the borders of "lower left box'' and the ''lower right box'' , just need to have a vertical line between them in black how can it be done? Tried but all the borders of the two columns get affected.

IPB Image

This post has been edited by Angie333: Jan 19 2014, 12:43 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jimlongo
post Jan 20 2014, 01:51 AM
Post #15


This is My Life
*******

Group: Members
Posts: 1,128
Joined: 24-August 06
From: t-dot
Member No.: 16



You can designate border-left: border-right: , etc., or the shorthand border: Top,Left,Bottom,Right - same for margin and padding.
http://www.w3schools.com/css/css_border.asp
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Angie333
post Jan 20 2014, 12:52 PM
Post #16


Advanced Member
****

Group: Members
Posts: 101
Joined: 16-January 14
Member No.: 20,243



got it, thank you again smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

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

 



- Lo-Fi Version Time is now: 29th March 2024 - 06:18 AM