Soooo... I was working on this page using jsFiddle and it doesn't work the same on the actual page!
http://jsfiddle.net/8Hpmj/8/
http://ktaadn.me/about/
The ktaadn.me example isn't left-justified and filling the width below the logo.
What did I do wrong?
If you need inspiration this is my seductive, unhelpful cat.
http://4.bp.blogspot.com/-NVtngGt43Rs/Tcmmw6RR-zI/AAAAAAAABOI/UPYJJHpAlk8/s640/IMG_9728.jpg
Thanks!
add padding:0; to .nav1
and width:100% to the anchor tags odd.a and such
that should fix it.
tip: do not use these css grid frameworks if you are not very solid at it.
good luck man.
Related
I have a css homework to copy exactly a web site. I've done about 80% of my work but there're still some elements in the original website that i can't bring to my copy, for example, these separators:
I've tried some ways on the Internet but none of them seems to work with my current situation.
This is my work until now: https://dl.dropboxusercontent.com/u/178536659/xin/index.html.
Besides that, my teacher provided us some resources (included logos, images etc... to make a copy of the website). It includes some transparent-only horizontal rectangle images. I dont' know what it is used for ... Is it use for make these separators, i guess ?
So I hope you guys could help me with this ... any comments would be appreciated. Thanks so much in advanced !
They are simple borders, such as
ul#nav_menu li {
border-right: 1px solid #cecece;
}
Now remove the border of the first child from the element using some class or id and setting no border to it! Simple.
There are many ways to create vertical separators, the most common border-left/border-right or pseudo elements :before and :after, horizontal separators are made with <hr> tag.
Borders documentation:
http://www.w3schools.com/css/css_border.asp
Here are some good examples with pseudo-elements (which you can use with your images):
http://krasimirtsonev.com/blog/article/CSS-before-and-after-pseudo-elements-in-practice
You can also create divs, give them css properties to emulate a separator and place them in between or use images.
Use this in your CSS. I think it will work for you.
#header ul li{border-right:2px solid #d8d8d8;}#header ul li:last-child{border:none;}
http://www.artwars.net
Please take a look at the footer with logos two of the logos links bedpr and stormtrooper aren't working.
It is better to view the code through the browser than me paste it.
Appreciate the help.
Ant
Your markup is messy:
<div id="logo118" <a href="http://www.bedpr.com/"><img src="http://www.artwars.net/wp-content/themes/artwars2/images/bedpr.jpg" width="145" height="40"></div>
That's no valid HTML. You should close the starting div tag. I think you forgot the ">".
edit:
Take a look at the div's: The swarowski logo's div is missing
float:left; //So just add it there.
Also it has a
margin-left:360px;
instead of
left:360px; //This should not force design problems, just to improve your layout
Now, you have to adjust logo113 and logo115. Just like this:
top:-20px; //instead of -50px
Should work now.
I'm creating my first website and I cannot get around this problem, my H3 link keep hovering below my third content list, does anybody know how to get around this problem, I'll be really glad If anyone can help me out
body {
width:98.8%;
position:absolute;
background-color:#e5e5e5;
text-align : left;
}
Demo
If I'm interpreting the comments correctly, I think you want what's happening in this fiddle.
The issue was that the parent anchor tags of the h3 didn't have any positioning, so I removed the top and left position on the h3 and put that styling on the a tag. This is all on lines 27-37 of the CSS in the fiddle.
I think the bigger issue is that the position property is being used in a lot of places and ways that are not ideal.
I have very annoying problem with my HTML code. Demo: http://eclipzh.exg.lv/itap/ , as you see, adding #news-bg divider, it ruins #users-online and #adverts element which are in one global #menu divider. HTML5+CSS3 platform, recommends look the site with Chrome/FF, IE for while is not supported so far. Thanks!
HTML+CSS:http://paste.laravel.com/KIi html and css is in one textcode, cause of reputation limit.
Bad
In your #menu you could set position: absolute;.
I've added this twitter widged to one of the site's i manage and for some reason, in every browser but firefox it looks good but in firefox this happens
bam it jump to the side for no reason i solved this by putting overflow:hidden; to the class textwidget
but then everything is gone in the rest of the browsers?
could anyone help me find a solution for this.
All help is very much appreciated
p.s. the site can be found here
Popdrommen
After successfully defeating your popup window, I have come to a conclusion that something like this should help you:
.textwidget {
clear: both;
}
Best thing to do in my opinion, is create a div, set its size, and then apply the overflow:hidden attribute to it, (remember to position it relativly)
Then inside that div put the twitter stuff.
<div style="width:200px; height:500px; position:relative; overflow:hidden">
<!-- Twitter stuff here //-->
</div>