can't figure out how to code this... - CSS-Tricks

This topic is empty.

Viewing 15 posts - 1 through 15 (of 16 total)

1 2 →

Author

Posts
February 9, 2009 at 6:07 am #24139

Siephe
Member

I can’t seem to figure how to code this one part of this site I’m making to make it look the way I want it to. Currently the part I’m working on looks like this:

[img]http://img147.imageshack.us/img147/8752/currentza9.th.jpg[/img]

What I want is for it to look like this:

[img]http://img8.imageshack.us/img8/5429/wishfulthinkingik7.th.jpg[/img]

The HTML code that I have for it so far is:

Quote:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Guangzhou No. 47 Middle School</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<div id="header">
<div class="wrapper">
<a href="http://#"><img src="images/logo.jpg" id="logo"></a>

<div id="navi">
<!– ===========================NAVIGATION BELOW================================== –>

<ul>
<li><a href="#" title="">??</a></li>
<li><a href="#" title="">????</a></li>
<li><a href="#" title="">????</a></li>
<li><a href="#" title="">????</a></li>
<li><a href="#" title="">????</a></li>
</ul>
<div id="clear"></div>

<!– ===========================NAVIGATION ABOVE================================== –>
</div>
</div>
</div>

<div class="wrapper">
<div id="topMain"> </div>
<div id="main">
<div id="mainwrapper">

<!– ==========================MAIN CONTENT BELOW=============================== –>
<h1>Welcome</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard
dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised
in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
like Aldus PageMaker including versions of Lorem Ipsum. </p>
<p>?????????????????????????????????? ????????????????????????
???????????? ??????????????????????????????</p>

<!– =================NEWS PAGINATION BELOW============ –>
<div id="submain">
<h1>News: Site Online</h1>
<p>?????????????????????????????????? ???????????????????????
????????????? ???????????????????????????????????? ?????</p>
<h1>???????</h1>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum." </p>

</div>

<!– ================NEWS PAGINATION ABOVE============== –>

<!– ==========================MAIN CONTENT ABOVE================================ –>
</div>
</div>
<div id="bottomMain"></div>

</div>

<div id="white">
<div class="wrapper">
<div class="randomq">
<h1>????</h1>
<!– ===========================RANDOM QUOTE BELOW=========================== –>

<p>All knowledge is worth having.</p>
<p>???????????</p>

<!– ===========================RANDOM QUOTE ABOVE=========================== –>
</div>

<div class="featured">
<h1>????</h1>
<!– ===========================FEATURED WORK BELOW========================= –>
<table>
<tr>
<td>
<!– ======== PREVIEW BELOW======= –>

<img src="featured/1.gif" />

<!– ======== PREVIEW ABOVE===== –>

</td>
<td>
<!– ======INFORMATION BELOWS====== –>
<ul>
<li><b>???</b> CHIZURU </li>
<li><b>???</b> ???5?? XXX??</li>
<li><a href="#">??</a></li>
<li><a href="#">??</a></li>
</ul>

<!– =======INFORMATION ABOVE==== –>
</td>
</tr>
</table>
<!– =============================FEATURED WORK ABOVE====================== –>

</div>
<div class="honour">
<h1>???</h1>
<table>
<tr>
<td>
<!– =============================HONOUR ROLL BELOW====================== –>
<ul>
<li><b>?????? XXX??</b> ????????</li>
<li><b>?????? XXX??</b> ????????</li>
<li><b>?????? XXX??</b> ????????</li>
<li><b>?????? XXX??</b> ????????</li>
<li><a href="#">??</a></li>
</ul>
<!– ============================HONOUR ROLL ABOVE======================== –>
</td>
</tr>
</table>
</div>
</div>

</body>
</html>

And the CSS:

Quote:

body {
background: url(‘images/bg.jpg’) 0 0;
height: 100%;
margin: 0;
padding-top: 0;
}

.wrapper {
width: 90%;
margin-left: auto;
margin-right: auto;
}

/*

HEADER

*/

#header {
height: 120px;
min-width: 960px;
padding: 0;
margin: 0;
background: url(‘images/hb.jpg’) bottom repeat-x #4e6039;
}

#navi {
margin: 0px;
position: relative;
}

#navi ul {
margin: 0;
padding: 0;
}

#navi li {
display: block;
list-style: none;
float: right;
max-height: 120px;
}

#navi li a {
display: block;
color: #e3e3e3;
font-family: georgia;
font-size: 12pt;
font-weight: normal;
text-align: center;
text-transform: lowercase;
text-decoration: none;
letter-spacing: 0px;
margin: 0 3px 0 3px;
padding: 58px 5px 1px 5px;
border-bottom: 2px solid #009241;
}

#navi li a:hover {
color: #ffffff;
background: url(‘images/hub.jpg’) repeat-x #495a35;
border-bottom: 2px solid #11be5e;
}

#clear {
clear:both;
}

#logo{
width: 272px;
height: 113px;
margin: 0;
padding: 0;
cursor: default;
float: left;
border: 0;
}

/*

MAIN CONTENT

*/

#topMain {
background:url(‘images/mh.jpg’) no-repeat 0 0;
width: 907px;
height: 35px;
margin-top: 5px;
margin-left: auto;
margin-right: auto; }

#mainwrapper{
width: 90%;
margin-left: auto;
margin-right: auto; }

#main {
color: #bababa;
font-family: Tahoma;
font-size: 10pt;
text-align: justify;
background:url(‘images/mb.jpg’) repeat-y 0 0;
width: 907px;
padding-top: 3px;
padding-bottom: 3px;
margin-left: auto;
margin-right: auto;
}

#bottomMain {
background:url(‘images/mf.jpg’) no-repeat 0 0;
width: 907px;
height: 43px;
margin: 0 auto;
padding: 0; }

#main h1 {
color: #eeea8a;
font-family: Georgia;
font-size: 22pt;
font-weight: normal;
text-transform: lowercase;
text-decoration: none;
padding-left: 10px;
margin: 0;
border-left: 20px solid #eeea8a;}

#submain {
color: #979797;
font-family: Tahoma;
font-size: 10pt;
width: 85%;
padding-top: 5px;
padding-bottom: 5px;
margin-left: auto;
margin-right: auto; }

#submain h1 {
color: #b3bb8e;
font-family: Georgia;
font-size: 16pt;
font-weight: 100;
text-transform: lowercase;
text-decoration: none;
padding-left: 7px;
margin: 0;
border-left: 15px solid #b3bb8e;}

/*

WHITE SUBCONTENT

*/

#white { color: #999999;
font-family: Tahoma;
font-size: 10pt;
text-align: justify;
min-width: 960px;
min-height: 220px;
padding-bottom: 10px;
margin: 2px 0 0 0;
background: url(‘images/photo.jpg’) 10% 0 no-repeat #fafafa;
border-top: 3px solid #999f53;
}

#white a {
color: #b24135;
text-decoration: none;
cursor: default; }

#white a:hover {
color:#cf4f41;
text-decoration: none;
cursor: default; }

.randomq {
text-align: center;
width: 344px;
height: 85px;
background: url(‘images/quote.jpg’) no-repeat center;
margin-top: 60px;
margin-left: 55%;
margin-bottom: 50px;
position: relative;
}

.randomq p {
margin: 0;
padding: 0;
}

.randomq h1 {
color: #4d5e38;
font-family: Georgia;
font-size: 16pt;
font-weight: normal;
text-transform: lowercase;
text-decoration: none;
text-align: right;
margin: 0 0 3px 0;
padding-right:10px;
border-right: 15px solid #4d5e38;
border-bottom: 2px dashed #4d5e38;
}

.featured {
text-align: justify;
width: 40%;
margin-top: 100px;
position: relative;
border: 0px solid #000;
}

.featured h1 {
color: #4d5e38;
font-family: Georgia;
font-size: 16pt;
font-weight: normal;
text-transform: lowercase;
text-decoration: none;
text-align: left;
margin: 0 0 3px 0;
padding-left:10px;
border-left: 15px solid #4d5e38;
border-bottom: 2px dashed #4d5e38;
}

.featured ul {
padding: 0;
margin: 20px;
}

.featured li {
padding: 0;
margin: 0;
list-style: square;
}

.featured img {
margin: 3px;
padding: 0.3em;
background-color: #f2f2f2;
border: 1px solid #ccc;
}

.featured img:hover {
margin: 3px;
padding: 0.3em;
background-color: #fff;
border: 1px solid #ccc;
}

.honour {
display: inline;
float: left;
text-align: justify;
width: 50%;
margin:
position: relative;
border: 0px solid #000;
}

.honour h1 {
color: #4d5e38;
font-family: Georgia;
font-size: 16pt;
font-weight: normal;
text-transform: lowercase;
text-decoration: none;
text-align: left;
margin: 0 0 3px 0;
padding-left:10px;
border-left: 15px solid #4d5e38;
border-bottom: 2px dashed #4d5e38;
}

.honour ul {
padding: 0;
margin: 20px;
}

.honour li {
padding: 0;
margin: 0;
list-style: square;
}

Any ideas? I’d appreciate the help… Cause it’s sort of urgent… >< Thanks in advance!

February 9, 2009 at 6:19 am #54230

ikthius
Member

I am not sure I know what your asking….

do you mean at the bottom there is 2 divs, one that has an image "hold on to me" and the other div is below that?
do you mean you want to change it so that they are next to each other?

plus, giving us a link helps as well, we can then see the code, and the images and we can try and see the problem, having the code but not the images does not help us help you.

I will look over the code and hopefully see something

EDIT: if you want your honour & feature div blocks to be the same, as in size, width, text colour, size, font-family, etc, then I would only have one class and use it for both blocks.

but I changed these two code snippets…. based on what I think was your problem:

Code:

.featured {
text-align: justify;
float:left;
width: 40%;
margin-top: 100px;
position: relative;
border: 0px solid #000;
}

.honour {
display: inline;
float: left;
text-align: justify;
width: 50%;
margin-top: 100px;
padding-left:50px;
position: relative;
border: 0px solid #000;
}

February 9, 2009 at 8:20 am #54149

Siephe
Member

Here, I’ve uploaded what I’ve got done so far:
http://siephed.org/47/index.html

And yeah, I want the two boxes to be side by side. They’re going to be different, aside from size, which is the reason why I have different CSS for the two. I just got lazy and copied and pasted, and just add and change accordingly. XP

I also can’t figure a way to get the white part background to stretch the way I want it to in IE and Mozilla. But if I can’t get it to work in both, then I’ll settle for IE since the site is intended for Chinese visitors, and people in here in China tend to use IE more than FF. Can’t for the life of me understand why though.

February 9, 2009 at 8:27 am #54145

Ramesh
Member

change your css to this

.featured {
text-align: justify;
width: 40%;
border: 0px solid #000;
float:left;
}

.honour {
float: left;
text-align: justify;
border: 0px solid #000;
}

February 9, 2009 at 8:53 am #54142

ikthius
Member

"Siephe" wrote:

Here, I’ve uploaded what I’ve got done so far:
http://siephed.org/47/index.html

And yeah, I want the two boxes to be side by side. They’re going to be different, aside from size, which is the reason why I have different CSS for the two. I just got lazy and copied and pasted, and just add and change accordingly. XP

I also can’t figure a way to get the white part background to stretch the way I want it to in IE and Mozilla. But if I can’t get it to work in both, then I’ll settle for IE since the site is intended for Chinese visitors, and people in here in China tend to use IE more than FF. Can’t for the life of me understand why though.

I changed the code for honour & feature in my last post, it works with FF, ramesh has done roughly the same, although I never took anything away from your code, in case it is needed for something you have in mind

February 10, 2009 at 2:04 am #54067

Ramesh
Member

still i can see the css code is same like it was before you just apply my property to your css

if you go here and check the css file http://siephed.org/47/style.css

February 10, 2009 at 5:33 am #54078

Siephe
Member

^ The one on the site hasn’t changed yet before, because between both your posts, I haven’t been able to come online. But, anyway, the positioning finally works~ Thanks! But I’m still stuck with this problem when I open it in FF. You can see that the white part doesn’t stretch the way it’s supposed to.

[img]http://img518.imageshack.us/img518/7233/currentvq8.th.png[/img]

I’m not really great with CSS… I’m still stuck on my medieval love of tables. ><

February 10, 2009 at 6:53 am #54100

Ramesh
Member

you need to add this code before the last colosing div

<div style="clear:both;"></div>

February 10, 2009 at 7:00 am #54098

ikthius
Member

"Ramesh" wrote:

still i can see the css code is same like it was before you just apply my property to your css

if you go here and check the css file http://siephed.org/47/style.css

ramesh, you need to give people time to get on with their life, they will code when they got time, or ask back when they can’t do it.

@siephe, you do need to clear the floats, your featured & honour are floated, so you need to clear these.

you could do it with inline CSS, by adding this line of HTML after the div after the table:
<div style="clear:both"></div>

or you could add a clear class to your CSS like so:
.clear
{
clear:both;
}

and your HTML should look like this:
<div class="clear"></div>
although I like to add a comment into it like so: <!– force for IE –></div> I noticed a problem with a line I made and it never worked in IE without something in the div, so a comment done the job to force IE to behave

good luck

February 11, 2009 at 5:29 am #54117

Siephe
Member

Thanks! It worked~

February 11, 2009 at 6:11 am #54119

ikthius
Member

"Siephe" wrote:

Thanks! It worked~

glad its all worked out for you.

good luck with the project

February 21, 2009 at 10:54 pm #53880

Siephe
Member

New problem, but I figured it’d be better than starting a new thread.

http://siephed.org/47/

At the bottom of the white space… The two columns just won’t position right. They were fine before, but then somehow when I tried to change the image code, it turned out like this. I tried changing the CSS back to the way it was before I edited it, but it’s still stuck like this.

Does anyone know what’s wrong?

February 22, 2009 at 6:39 am #53882

Rob MacKay
Participant

"Siephe" wrote:

New problem, but I figured it’d be better than starting a new thread.

http://siephed.org/47/

At the bottom of the white space… The two columns just won’t position right. They were fine before, but then somehow when I tried to change the image code, it turned out like this. I tried changing the CSS back to the way it was before I edited it, but it’s still stuck like this.

Does anyone know what’s wrong?

You have a huge margin set on that left side div? Positioning elements with margin and padding is going to cause you some huge problems…

Is there any reason why you are using that much margin?

February 23, 2009 at 12:13 am #54260

Siephe
Member

It’s cause I was trying to get it to look the way I wanted it to without really knowing what the heck I was doing. It ended up the way I wanted to before, so I left it the way it was.

February 23, 2009 at 4:18 am #50508

Rob MacKay
Participant

"Siephe" wrote:

It’s cause I was trying to get it to look the way I wanted it to without really knowing what the heck I was doing. It ended up the way I wanted to before, so I left it the way it was.

Ahh the struggle! :D How would you like it to look? with the shout box and other box next to each other?
Author

Posts

Viewing 15 posts - 1 through 15 (of 16 total)

1 2 →

The forum ‘CSS’ is closed to new topics and replies.