ive been following this guys tutorial, ive timestamped it- and he has a text block that floats to the side.
image, which is a div on its own keeps going in the middle when i make one float left and the other float right and i don't know why.
enter image description here
*also if i put the image floated next to a textbox, how would i make sure they're the same height?
body {
background-color: aquamarine;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.navbar {
list-style: none;
color: red;
}
.container {
width: 60%;
margin: auto;
}
.box-1 {
margin-bottom: 1%;
padding: 1%;
background-color: darkgray;
color: white;
}
.box-2 {
float: left;
padding: 1%;
width: 30%;
color: black;
background: white;
border-style: none;
}
.sidebox {
float: right;
background-color: aliceblue;
width: 60%;
}
img {
float: none;
margin: 10%;
display: block;
width: 300px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>help</title>
<link href="Untitled-1.css" rel="stylesheet" />
<meta charset="utf-8" />
<meta name="description" content="Web Development" />
<meta name="keywords" content="HTML and CSS" />
<meta name="author" content="grace" />
</head>
<body>
<header>
<nav class="navbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Study</li>
<li>Animation</li>
</ul>
</nav>
</header>
<div class="container">
<div class="box-1">
<h1>Achievments</h1>
<p>Grace has completed these 4 achievements:</p>
<ol>
<li>Two decades of existing</li>
<li>3+ jobs</li>
<li>Graduated high school</li>
<li>Failed hopes and dreams</li>
</ol>
</div>
<div class="box-2">
<h1>Hobbies</h1>
<ul>
<li>Rollerskating</li>
<li>Crying</li>
<li>Buying many books</li>
<li>Reading some books</li>
<li>Drawing and ctrl z</li>
<li>Video Games</li>
</ul>
</div>
<div class="sidebox">
<p>Lorem ipsum ebfasuigfuie eufsiefh adfhuseifhuei efhnsihfeihf </p>
<p>fuck</p>
<p>off</p>
<p>image</p>
</div>
<div class="astro">
<img src="https://res.cloudinary.com/dvifiaohc/image/upload/v1651048486/fly_gpbrfe.png">
</div>
</div>
</body>
</html>
Your CSS for the image elements is all wrong if you're trying to float and snap to the rightmost part of the page.
img{
float:none;
margin:10%;
display:block;
width:300px;
}
Set the margin value to something closer to 0 and set float: right, like so
img{
float: right;
margin:5px;
display:block;
width:300px;
}
Related
i tried to make a top nav bar. why my version is different from the w3s version, I cant find my mistake.
this is the css code and the html code
.logo {
padding-right: 30px;
color: #ffffff;
}
.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #a80664;
border-color: transparent;
background-color: #a80664;
}
.topnav-menu {
float: left;
}
.topnav-menu a {
display: block;
color: #ffffff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.topnav-menu a:hover:not(.active) {
background-color: #ff0094;
}
.topnav-menu a.active {
{
color: #a80664;
background-color: #f3f3f3;
}
}
<!DOCTYPE html>
<html>
<head>
<!-- BOOTSTRAP CSS STYLESHEET LINK -->
<!-- MY CUSTOM CSS -->
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<title></title>
</head>
<body bgcolor="#000000">
<li>
<div class="logo"><a>LOGO</a></div>
</li>
<ul class="topnav-menu">
<li><a class="active" href="#Home">HOME</a></li>
<li>KATEGORI</li>
</ul>
</body>
</html>
With those code I can't make a top nav bar like this
this is what i want
what kind of mistake did i do?
You have to put your logo before tag and you have to wrap in
and you have to wrap your all code in side
<nav>
<div class="logo">
<img src="imagepath">
</div>
<div class="wrapper">
<ul>
<li>Home</li>`enter code here`
**strong text**<li>About</li>
</ul>
</div>
</nav>
Here's my issue and I'll do my best to be clear here--
I have a simple website laid out in complete CSS using an external stylesheet.
I have a main container holding all of the elements for the website content; however, they all seem to be working except for the one that holds the actual page text and the businessbox. Right now, it's show the main containers background color (green) instead of what it should be (white). I'm positive it is something simple that I overlooked and will probably kick myself later, but thought I'd ask for a second pair of eyes.
Here is what I'm getting and what it should look like. If I'm having problems with this one container, hopefully programming the 3 vertical columns won't be an issue!
SCREENSHOT:
My stylesheet (style.css):
#charset "UTF-8";
/* CSS Document */
body {
background: #88b488;
margin: 3%;
font-family: Arial, Helvetica, sans-serif;
}
#container {
background: #006200;
width: 1020px;
margin: 0 auto;
}
#header {
background-image: url(img/BS_header.jpg);
background-repeat: no-repeat;
background-position:center;
width: 1020px;
height: 322px;
}
<!-- MENU ITEMS -->
#menu {
background: #25235b;
width: 100%;
z-index: 2;
}
#menu ul, #menu ul ul {
list-style-type: none;
padding: 0;
margin: 0;
float: right;
margin-top: 15px;
margin-right: 5px;
}
#menu ul li{
padding: 5px;
position: relative;
float: left;
}
#menu ul a:link, #menu ul a:visited{
display: inline-block;
color: #ffffff;
width: 90px;
padding: 5px;
text-decoration: none;
font-size: 12px;
font-weight: bold;
text-align: center;
}
#menu ul a:hover, #menu ul a:active {
background: #006100;
}
#menu ul ul {
position: absolute;
margin-top: -1px;
right: 0px;
white-space: nowrap;
visibility: hidden;
}
#menu ul li:hover ul li{
visibility: visible;
color: #ffffff;
background-color: #afafaf;
padding: 0px;
}
<!-- CONTENT -->
#cbox{
width: 1020px;
background-color: #ffffff;
background-image:url(img/content_grad.jpg);
background-repeat: repeat-x;
}
#businessbox {
background-color: #006200;
width: 620px;
height: auto;
border-top: 3px solid #afafaf;
margin-top: 30px;
padding: 10px;
margin: 30px auto 0px;
}
.businesstitle {
text-align:center;
font-size: 20px;
color: #ffffff;
text-transform: uppercase;
font-style:italic;
}
.businesstext {
color: #ffffff;
font-size: 14px;
}
#footer {
font-size: 10px;
text-transform: uppercase;
color: #fff;
text-align: center;
padding: 10px;
background: #006100;
}
My HTML:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Buy Local</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<div id="menu">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Hot Deals</li>
<li>Sign Up!</li>
<li>Resources
<ul>
<li>Events</li>
</ul>
</li>
</ul>
</div> <!--end of menu-->
</div> <!--end of header-->
<div id="cbox">
<div id="businessbox">
<div class="businesstitle">Our BUSINESS OF THE MONTH:</div><br />
<img src="#" width="150" height="90" style="float: left; padding-right: 10px;"/>
<div class="businesstext">You could be our next title sponsor and get your business in the spotlight with logo, name, and short blurb about your business.</div>
</div> <!--end of businessbox-->
</div> <!--end of cbox-->
<div id="footer">
2013 © Buy Local
</div><!--end of footer-->
</div><!--end of container-->
</body>
</html>
You've got HTML comments in your CSS. The browser is skipping rendering the line next to it so your #cbox and #menu styles are never applied. Remove the <!-- MENU ITEMS --> and <!-- CONTENT --> comments and this should work fine.
See this fiddle for that in action.
OP,
Why are you doing this: <img src="#" ... ?
Also, are any of your background-image urls resolving?
Like I said, it was the obvious--used the wrong commenting format and it caused the #cbox attribute to not function correctly.
Thanks for taking your time to help me with my silly problem!
Where you use image or background-image there use overflow: hidden; height: 1%; i think will solve your problem.
i've been facing trouble with aligning some content to center of a page... the point is, i was able to achieve it .. but when the browser is resized, the content on the left side is not visible.. i am not sure where i am going wrong.. the code is as follows...
HTML Code ....
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Home</title>
<link href="home.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<img class="logo" src="logo.jpg" width="160px" height="83px">
<div id="menualign">
<ul>
<li class="topli">Home</li>
<li class="topli">site 1</li>
<li class="topli">Site 2</li>
<li class="topli">Logout</li>
</ul>
</div>
<img src="bgn.jpg" width="900" height="7" id="bar">
</div>
</body>
</html>
CSS Code is as follows
#container
{
width:920px;
height:600px;
position:absolute;
left: 50%;
top: 50%;
margin-left: -460px;
margin-top: -300px;
}
#menualign
{
position:relative;
left:24%;
}
#menualign ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#menualign ul li { display: inline; }
#menualign ul li a
{
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
padding: .2em 1.41em;
color: #0056A2;
background-color: #fed352;
}
img.logo
{
position:relative;
top:20px;
}
#menualign ul li a:hover
{
color:black;
font-size:17px;
}
You need to position your container with margin:0 auto; and then give float:left to the image and float:right to the menu. Last give menu line-height of the image height to align it verticaly.
#container
{
width:920px;
margin:0 auto;
}
#menualign ul li {
margin-top:10px;
line-height:83px;
float:left;
}
img.logo
{
float:left;
margin-top:10px;
}
Ok i made a little jsFiddle and I hope it will help.jsFiddle
I created a layout were everything is centered (with the "margin="0 auto" technique). I also wanted the header and footer to be black and expand to both sides when the browser enlarge to the sides. If I center everything the black background will center too and it wont expand indefinably. The only solution I found was to apply the background style to the header and footer and using a class inside them (.container) to center the content (I think Stack Overflow uses this technique with the footer). It's nice but I would like to know if there's a better way rather than adding additional divs?
MY HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>globo design</title>
<link href="styles/layout.css" rel="stylesheet" type="text/css" />
<link href="styles/slideshow.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="scripts/slideshow.js"></script>
</head>
<body id="home">
<!-- header -->
<div id="header">
<div class="container">
<h1>wider design</h1>
<!-- navigation -->
<ul id="navigation">
<li class="home"><span>home</span></li>
<li class="portfolio"><span>portfolio</span></li>
<li class="about"><span>about</span></li>
<li class="contact"><span>contact</span></li>
</ul>
</div>
</div>
<!-- content -->
<div id="content">
<div id="top-column">
<p>We <strong>design and develop</strong> clean and effective webs in the <strong>top 3 languages</strong>
on the Internet. Internet is mean to reach the whole world.You are mean to reach the whole audience:</p>
</div>
<div id="middle-column">
<h2>Our Work</h2>
<!-- slideshow -->
<div id="slideshow">
<div id="slidesContainer">
<div class="slide">
Content for slide 1 goes here
</div>
<div class="slide">
Content for slide 2 goes here
</div>
<div class="slide">
Content for slide 3 goes here
</div>
<div class="slide">
Content for slide 4 goes here
</div>
</div>
</div>
</div>
<div id="left-column">
<h2>Web Design</h2>
<p>Create a web site easily with this online HTML generator. Follow the steps below to create web pages then click "view html page" to test it once it's completed. You can copy and paste generated code where you wish within the generated document(s). For example: You created an HTML table with 3 rows and 3 columns. You then added a link, which appears below the HTML table. If you want the link inside the HTML table, just cut and paste it inside the table in place of an "ADD TEXT" statement. Any where text,images,or links need to be, there will be a generated "ADD TEXT" statement in the HTML pages.</p>
</div>
<div id="right-column">
<h2>Web Translation</h2>
<p>Create a web site easily with this online HTML generator. Follow the steps below to create web pages then click "view html page" to test it once it's completed. You can copy and paste generated code where you wish within the generated document(s). For example: You created an HTML table with 3 rows and 3 columns. You then added a link, which appears below the HTML table. If you want the link inside the HTML table, just cut and paste it inside the table in place of an "ADD TEXT" statement. Any where text,images,or links need to be, there will be a generated "ADD TEXT" statement in the HTML pages.</p>
</div>
</div>
</div>
<!-- footer -->
<div id="footer">
<div class="container">
</div>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-11932489-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>
MY CSS:
/* reset */
* {
margin: 0;
padding: 0;
}
/* tags */
body {
background-color: #FFFFFF;
color: #5D5D5D;
font-family: Arial, "MS Trebuchet", sans-serif;
font-size: 75%;
}
h1 {
background: #2D2D2D url(../images/logo.png) no-repeat scroll 0 0;
margin-bottom: 20px;
text-indent: -9999px;
}
h2 {
color: #418EE4;
font-family: Arial;
font-size: 16px;
font-weight: normal;
margin-bottom: 10px;
}
a {
font-family: Arial, "MS Trebuchet", sans-serif;
}
/* classes */
.container {
margin: 0 auto;
width: 960px;
}
/* header */
#header {
background-color: #2D2D2D;
padding-top: 10px;
}
/* navigation */
ul#navigation {
height: 20px;
list-style: none;
margin: 0;
padding: 0;
}
ul#navigation li {
float: left;
}
ul#navigation li a {
background: url(../images/tab.png);
color: #C0C0C0;
display: block;
height: 20px;
outline: none;
padding-left: 10px;
text-decoration: none;
}
ul#navigation li a:hover {
color: #418EE4;
}
#home li.home a, #portfolio li.portfolio a, #about li.about a, #contact li.contact a {
background-position: 0 -32px;
color: #757575;
}
ul#navigation span {
background: url(../images/tab.png) 100% 0;
display: block;
line-height: 20px;
padding-right: 20px;
}
#home li.home span, #portfolio li.portfolio span, #about li.about span, #contact li.contact span {
background-position: 100% -32px;
}
/* content */
#content {
background-color: #FFFFFF;
padding: 20px;
overflow: hidden;
margin: 0 auto;
width: 960px;
}
#content h2 {
border-top: 2px dashed #F0F0F0;
border-bottom: 2px dashed #F0F0F0;
padding: 5px 0 5px 0;
margin: 15px 0 15px 0;
}
#top-column {
color: #818181;
font-size: 16px;
font-family: Arial, "MS Trebuchet", sans-serif;
margin: 10px 0 10px 0;
padding: 10px 0 20px 0;
}
#top-column strong {
font-weight: normal;
color: #3C3C3C;
}
#middle-column {
float: left;
}
#right-column {
float: left;
width: 420px;
}
#left-column {
float: right;
width: 500px;
}
/* footer */
#footer {
clear: both;
background-color: #2D2D2D;
height: 200px;
}
I haven't tested your code, but from the description it sounds like what I would typically do to code a stacked layout like this. My HTML structure would be something like this (obviously I've left out head, links to stylesheets, etc. for the sake of a simple example):
<html>
<body>
<div id="header-wrap">
<div id="header"> ... </div>
</div>
<div id="main-wrap">
<div id="main"> ... </div>
</div>
<div id="footer-wrap">
<div id="footer"> ... </div>
</div>
</body>
</html>
I think you can see how the CSS would be written for this -- each of the wrappers (#header-wrap, #main-wrap, #footer-wrap) would have the background applied and 100% width, then the inner containers (#header, #main, #footer) would have a fixed width with no background applied. If you are using, for example, 2 floated columns inside the main, you'll have to use something similar to a div that clears underneath for the background to fill the height of the content. It's not the best solution, but it's common and works well.
<div id="main">
<div style="float: left; width: 30%;"> ... </div>
<div style="float: right; width: 60%;"> ... </div>
<div style="clear: both; height: 0;"> </div>
</div>
I am having the hardest time controlling where my drop-downs show up! I have gone through the css and made changes but for some reason they don't seem to reflect. Could someone possibly see anything I am missing?
If you hover over the tabs "contact us" and "help desk" on the link below you will see what I mean.
http://krontechnology.com/dev/index_new.html
Here is the css for the dropdowns:
.chromestyle{
font-weight: bold;
}
.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.chromestyle ul{
border: 1px solid #BBB;
width: 800px;
margin: 0;
text-align: center;
padding-top: 16px;
padding-right: 0;
padding-bottom: 0px;
padding-left: 0;
background-color: #000000;
height: 32px;
}
.chromestyle ul li{
display: inline;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
}
.chromestyle ul li a{
color: #FFFFFF;
margin: 0;
text-decoration: none;
padding-right: 8px;
padding-bottom: 4px;
padding-left: 8px;
padding-top: 12px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #666666;
}
.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a
class of "selected" to the current active menu item*/
}
/* ######### Style for Drop Down Menu ######### */
.dropmenudiv{
position:absolute;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 150px;
visibility: hidden;
}
.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}
* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}
.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #F0F0F0;
}
Here is the html code for the page:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="index.css" rel="stylesheet" type="text/css" />
<link href="images/chromestyle.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript" src="chromejs/chrome.js"></script>
</head>
<div id="wrap">
<div id="header"></div>
<div id="flash">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash
/swflash.cab#version=7,0,19,0" width="800" height="237" title="SAP Specialists">
<param name="movie" value="SAP.swf" />
<param name="quality" value="high" />
<embed src="SAP.swf" quality="high" pluginspage="http://www.macromedia.com
/go/getflashplayer" type="application/x-shockwave-flash" width="800" height="237">
/embed>
</object>
</div>
<div id="dropmenu">
<div class="chromestyle" id="chromemenu">
<ul>
<li>ABOUT US </li>
<li>THE TEAM </li>
<li>POSITIONS</li>
<li>QUICK FACTS </li>
<li>TESTIMONIALS </li>
<li>PARTNERS </li>
<li>CONTACT US </li>
<li>CASE STUDIES </li>
<li>HELP DESK</li>
</ul>
</div>
<!--1st drop down menu -->
<div id="dropmenu1" class="dropmenudiv">
Locations
Register</div>
<!--2nd drop down menu -->
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
Collateral</div>
<!--3rd drop down menu -->
<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>
</div>
<div id="main"></div>
<div id="rr"><img src="images/RR-teaser.png" width="255" height="168" /></div>
<div id="testimonials"><img src="images/Testimonials-bknd.png" width="258" height="168"
/></div>
<div id="dod"><img src="images/DoD-teaser.png" width="255" height="168" /></div>
<div id="footer">Copyright
2009 Kröntechnology.com I Contact Webmaster</div>
</div>
</body>
</html>
Any help would be greatly appreciated!!!!
Three things you're doing wrong:
Using absolute positioning without a relative parent
Using Javascript to change the position values
Not really wrong per se, but you lose semantics because the dropdowns are not part of the menu. They're not associated with their parent items.
For #1, you should set the menu (#dropmenu) to position:relative. Then all absolutely positioned children will be positioned relative to the top left of that element. This means you can put top: 0; left: 500px on the drop down* and it will always appear in the same place. (The 500 value is just a guess but since your design is fixed with, it will be a constant value.)
For #2, this means you don't need to use Javascript to reposition the elements, just turn the visibility on and off.
For #3, I would also suggest that you make the dropdowns children of the menu itself, rather than siblings. This is more semantic and screenreaders then know the relationship between the menu items. You could use HTML similar to this:
<ul class="menu-level1">
<li>About Us</li>
<li>Contact Us
<ul class="menu-level2">
<li>Locations</li>
<li>Register</li>
</ul>
</li>
<li>Case Studies</li>
</ul>
You would set position: relative on .menu-level1 and position: absolute on .menu-level2.
it doesn't take into account the offsetLeft of your #wrap div.
make the change to your cssdropdown file.
cssdropdown.dropit = function(obj, e, dropmenuID){
if (this.dropmenuobj!=null) //hide previous menu
this.hidemenu() //hide menu
this.clearhidemenu()
this.dropmenuobj=document.getElementById(dropmenuID) //reference drop down menu
this.asscmenuitem=obj //reference associated menu item
this.showmenu(this.dropmenuobj, e)
this.dropmenuobj.x=this.getposOffset(obj, "left")
this.dropmenuobj.y=this.getposOffset(obj, "top")
// <<<<<< BEGIN CHANGE (notice the "- document.getElementById('wrap').offsetLeft")
this.dropmenuobj.style.left=(this.dropmenuobj.x-this.clearbrowseredge(obj, "rightedge")-document.getElementById('wrap').offsetLeft)+"px"
// <<<<<< END CHANGE
this.dropmenuobj.style.top=this.dropmenuobj.y-this.clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+1+"px"
this.positionshim() //call iframe shim function
}