CSS help

Community Off Topic
1

My site: www.koreaofalltrades.com/xe/
The header and menu are overlapping .
How do I put my slider beside the twitter timeline?
How can I make all the items position centered and the side only have a margin of 20%?

@charset “utf-8”;
/* Layout */
hr{display:none}
form, fieldset{border:0;margin:0;padding:0}
.user_layout{width:960px;margin:0 auto}
.header{zoom:1;background:#ddd;width:600px;}
.header:after{content:"";display:block;clear:both}
.gnb ul{float:left;background:#A9F7F3;
font-family: Arial;
color: #000000;
font-size: 28px;
padding: 10px 20px 10px 20px;
text-decoration: none;}
.gnb li{display: inline;width: 80px;}
.body{margin:20px 0;zoom:1;background:#eee}
.body:after{content:"";display:block;clear:both}
.twitter-timeline{float:left;width: 30%;background:#ddd}
.photoslider{float:right; width: 63%;background:#ddd;}
.content{margin-left:20%;margin-right:20%;clear:both;background:#A9F7F3}
.footer{margin-left:20%;margin-right:20%;background:#ddd}

2

Shouldn’t you first build the layout before adding so much code?

your header is <div class="header"> and your menu is <div class="gnb">, you nested your gnb inside your header, why would you do that if you want them below each other? that just doesn’t make sense

of course your slider won’t sit beside your twitter timeline, you have a clear: both after your twitter timeline:

.body:after{content:"";display:block;clear:both}

I recommend to start again from scratch, make a proper layout first, before implanting all js/twitter etc

3

I have created a new html and css. Why is the menu still in the header even though I remove it from the header?
The items are all overlapping. What should I do?

4

i can’t tell without you providing me with the code

6

if you edit/update your question, leave a reply so i get a notification. Your html code is not visible, take the following steps to make your code visible:

select your code and press ctrl + k (or cmd + k if you use a mac)

if this instructions are unclear, you can also insert 3 backticks before and after your code, like so:

```
<p>visible</p>
```

the backtick is located above the tab key on your keyboard

7

website : www.koreaofalltrades.com/xe

css
@charset “utf-8”;
/* Layout */
.header{background:#ddd;}
.header:after{content:"";display:block;clear:both}
.menu ul{float:left;background:#A9F7F3}
.menu li{display:inline;width: 80px;}
.body{background:#F92C30;margin:20px;}
.body:after{content:"";display:block;}
.twitter-timeline{float:left;background:#261A1A}
.photoslider{background:#261A1A}
.content{background:#A9F7F3}
.footer{background: #261A1A}

8

your <div class="menu"></di> is still nested inside your <div class="header"></div>

How well do you know html + css?

9

I only know the abit of html and css.
I closed the header though??
I put the menu in the body section.

10

Well, seems like you did something wrong. take a look at this image:

1366×768 125 KB

As you can see, you close your header pretty much at the end. So no, you didn’t close it. Your <div class="menu"> looks a bit wrong as well

11 
<!doctype html>
<load target="user_layout.css" />
<html>
<head>
<meta charset="utf-8">
<title>Koreaofalltrades</title>
<div class="header">
<h1>Header</h1>
</head>
<body>
<div class"menu">
	         <ul>
				<li loop="$global_menu->list=>$key1,$val1" class="active"|cond="$val1['selected']"><a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'">{$val1['link']}</a>
					<ul cond="$val1['list']">
						<li loop="$val1['list']=>$key2,$val2" class="active"|cond="$val2['selected']"><a href="{$val2['href']}" target="_blank"|cond="$val2['open_window']=='Y'">{$val2['link']}</a></li>
					</ul>
				</li>
			</ul>
            </div>
           <a class="twitter-timeline" href="https://twitter.com/KOATSG" data-widget-id="670601134827024384">Tweets by @KOATSG</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
 <div class="photoslider">slider</div>
 <div class="latestnews">news</div>
</body>
<div class="content">.content{$content}</div>
<footer>
<div class="footer">copyrights</div>
</footer>
</html>
12

is it I never add the after the ?

13

your <div class="header"> and h1 should be inside body, look at this code:

<div class="header">
<h1>Header</h1>
</head>
<body>
<div class"menu">

you nest your menu (which is missing a equal sign after class) inside your header. (<div class="header"> that is.

Right, you really need to get better understanding of all this, here is what i would do: build a basic template (so ditch all the js code, the <load> tag, and all iframes and overcomplicated things. What you did was build an car engine (js, iframe, <load>) and then build the car around it, i would do it the other way around: build a car, then build the engine

14

Please use computer to see this page.
http://www.koreaofalltrades.com/xe/

How do I move the twitter to beside the pictures??

15

I don’t see any twitter?

16

1920×1080 340 KB
1920×1080 331 KB

Uploading…

17

Seems my adblock blocks it, can’t you simple use float: left and float: right? Or display: inline-block?

1 Like
18

I tried using float : left and display:inline-block. it doesnt work.
my html is :smile:

KoatSG 
  <nav><ul>
			<li loop="$global_menu->list=>$key1,$val1" class="active"|cond="$val1['selected']"><a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'">{$val1['link']}</a>
				<ul cond="$val1['list']">
					<li loop="$val1['list']=>$key2,$val2" class="active"|cond="$val2['selected']"><a href="{$val2['href']}" target="_blank"|cond="$val2['open_window']=='Y'">{$val2['link']}</a></li>
				</ul>
			</li>
 </ul></nav>
 </header>
 
 <div class="maincontent">
  <div class="photos">
  <img src="img/pic1.jpg">
  <img src="img/pic2.jpg">
  </div>
  <div class="photoss">
  <img src="img/pic3.jpg">
  <img src="img/pic4.jpg">
  </div>
   <div class="content">{$content}</div>
 </div>
 
 <div class="topsidebar">
 <a class="twitter-timeline" href="https://twitter.com/KOATSG" data-widget-id="670601134827024384">Tweets by @KOATSG</a>

 <div class="photoslider">
 <article>
 <p>Photoslider</p>
 </article>
 
 </div>
 </div>
 
 

  <footer class="mainfooter">
  <p>Copyrights by Koreaofalltrades Designed by <a href="https://studiokdesigner.wordpress.com/"> StudioK </a></p>
  
  </footer>

css :

@charset “utf-8”;
/* CSS Document */

body{
color: #261A1A;
font-family:Arial, “Lucida Grande”, “Lucida Sans Unicode”, “Lucida Sans”, “DejaVu Sans”, Verdana, sans-serif;
text-align:left;
}

a {
text-decoration:none;
}

a:link, a:visisted {
}

a:hover, a:active{

}

.body{
margin: 0 auto;width:70%;clear:both;
}

.mainheader img{width:100%;height:auto;margin:2% 0
}

.mainheader nav{background-color: #666;height:40px;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;
}

.mainheader nav ul{list-style:none;margin:0 auto;
}

.mainheader nav ul li{float:left;display:inline;
}

.mainheader nav a:link, .mainheader nav a:visited {color:#FFF;display:inline-block;padding: 10px 25px
}

.mainheader nav a:hover, .mainheader a:active,
.mainheader nav .active a:link, .mainheader nav .active a:visited {
background-color:#261A1A;
text-shadow:none;}

.mainheader nav ul li a{
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.maincontent{
line-height: 25px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.photos{width:100%;display:inline-block;float:left;
}
.photoss{width:100%;display:inline;float:left;
}
.content {width: 70%;float:left;
}

a.twitter-timeline{width:21%;float:left;color:#261A1A;border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;margin-left:3%;margin-bottom:2%;padding: 2% 3%;
}

.topsidebar{width:21%;float:left;color:#261A1A;border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;margin-left:3%;margin-bottom:2%;padding: 2% 3%;
}

.mainfooter{width:100%;float:left;margin-top:2%;border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px
}

.mainfooter p{width:92%;margin: 2% auto;}

@media only screen and (min-width: 150px) and (max-width: 600px)
{

.body{
width:90%
}

.mainheader img{width:100%
}

.mainheader nav{height:40px
}

.mainheader nav ul{padding-left: 0
}

.mainheader nav ul li{width:100%;text-align:center;
}

.mainheader nav a:link, .mainheader nav a:visited {padding: 10px 25px;height:20px;display:block;
}

}

19

<!doctype html>

KoatSG 
  <nav><ul>
			<li loop="$global_menu->list=>$key1,$val1" class="active"|cond="$val1['selected']"><a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'">{$val1['link']}</a>
				<ul cond="$val1['list']">
					<li loop="$val1['list']=>$key2,$val2" class="active"|cond="$val2['selected']"><a href="{$val2['href']}" target="_blank"|cond="$val2['open_window']=='Y'">{$val2['link']}</a></li>
				</ul>
			</li>
 </ul></nav>
 </header>
 
 <div class="maincontent">
  <div class="photos">
  <img src="img/pic1.jpg">
  <img src="img/pic2.jpg">
  </div>
  <div class="photoss">
  <img src="img/pic3.jpg">
  <img src="img/pic4.jpg">
  </div>
   <div class="content">{$content}</div>
 </div>
 
 <div class="topsidebar">
 <a class="twitter-timeline" href="https://twitter.com/KOATSG" data-widget-id="670601134827024384">Tweets by @KOATSG</a>

 <div class="photoslider">
 <article>
 <p>Photoslider</p>
 </article>
 
 </div>
 </div>
 
 

  <footer class="mainfooter">
  <p>Copyrights by Koreaofalltrades Designed by <a href="https://studiokdesigner.wordpress.com/"> StudioK </a></p>
  
  </footer>
20

Works perfect, make your .photo have a width: auto; (not 100%), make .topsidebar float right, and add a margin-top: -400px and it works like a charm

21

wow. how did you do that?
why margin top - 400px