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;
}
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 have a div which in 1000px; and a navigation bar which is also 1000px; but it doesn't extend as much as the div.
Please help...
[index.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" />
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
<title>[phantzm]</title>
<link rel="stylesheet" type="text/css" href="style.css">
<center>
<div class="banner">
<IMG SRC="logo.png" class="logo" WIDTH=100 HEIGHT=100 ALT="pZ">
</div>
<center>
<div id="wrapper">
<div id="navMenu">
<ul>
<li>
fun stuff
<ul>
<li>jokes</li>
<li>riddles</li>
<li>facts</li>
</ul><!-- end of Second List -->
<li>
my work
</li>
<li>
my favourite songs
</li>
<li>
my favourite links
</li>
<li>
about me
</li>
<li>
contact me
<ul>
<li>phone</li>
<li>e-mail</li>
<li>mail</li>
</ul><!-- end of Second List -->
</li>
</li><!-- end of List Item -->
</ul><!-- end of Unordered List -->
</div><!-- end of navMenu div -->
</div><!-- end of wrapper div-->
</center>
</head>
<body bgcolor="#FFCECE">
</body>
</html>
[style.css]
body {
background: SILVER;
margin: 0;
padding: 0 auto;
}
.banner {
background: blue;
width: 1000px;
height: 70px;
}
.logo {
margin-top: 10px;
margin-right: 500px;
}
#navMenu {
margin: 0;
padding: 0;
line-height: 30px;
width: 1000px;
}
#navMenu ul {
margin: 0;
padding: 0;
border: 1px white;
}
#navMenu li:hover {
font-weight:normal;
text-transform: capitalize;
background:silver;
}
#navMenu ul li {
margin: 0;
padding: 0;
list-style:none;
float: left;
position: relative;
background: #4B8EE0;
border: 1px white;
border-left: 1px solid #0000ff;
border-right: 1px solid #000ff;
}
#navMenu ul: hover {
text-transform: capitalize;
}
#navMenu ul li a {
text-align: center;
font-family: "Arial";
text-decoration: none;
height: 30px;
width: 150px;
display: block;
color: white;
}
#navMenu ul ul {
position: absolute;
visibility: hidden;
top:30px;
border: 1px white;
}
#navMenu ul li:hover ul {
visibility: visible;
}
I have added the code for the style and index.. As you can see both the banner and navmenu have 1000px;
Just change you CSS like this: Live Demo
#navMenu ul li {
margin: 0;
padding: 0;
list-style:none;
float: left;
position: relative;
background: #4B8EE0;
border: 1px white;
border-left: 1px solid #0000ff;
border-right: 1px solid #000ff;
width:165.6px;
}
165.6 is (1000 - 5)/6 (approx)
Using Chrome, right-click each element and choose "Inspect Element". Scroll down to "Metrics". This will show you what other properties are affecting the apparent width of each element (margin, border, padding, box-model, and positioning).
The navigation is not 1000px because each item is set to fixed width
You should change the width of each item using percentage, so the width of each item is relative to 1000px and the number of items
however, if it's still not working, you should add <div style="clear:both;"></div> at the bottom of <ul></ul>
The length of the navigation bar is decided by each individual bullet point in the list. Where you have width: 150px; shows the length of each individual li. The length of all of them together gives you the length of the navigation bar. You add display: inline-block; under the #navMenu ul li to make it depend on the original width.
I am working on a page in Drupal 7 in which I have a number of boxes with text and a photo inside of them. I have the entire box div linking to its content page, but I can't seem to get rid of the underline.
I have tried applying text-decoration: none; to every class inside of and outside of the box and the text inside the box is still underlined.
Even when I use developer tools/'inspect element' tool in Google it shows that the computed style for the box and the text within is text-decoration: none;
I have been trying to figure this out off and on for about a day now and I have not been able to find any solutions via Google.
Any ideas?
Thanks in advance.
Edit: I am working to post my code. I am trying to find a good solution for posting because it is a page within Drupal that is rendering through Views. Also, I have a job interview in an hour that I'm getting ready for. I probably should have waited until after the interview to post this issue.. oh well.
Edit x2: My HTML is as follows:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" version="XHTML+RDFa 1.0" dir="ltr" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/terms/" xmlns:foaf="http://xmlns.com/foaf/0.1/" xmlns:og="http://ogp.me/ns#" xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#" xmlns:sioc="http://rdfs.org/sioc/ns#" xmlns:sioct="http://rdfs.org/sioc/types#" xmlns:skos="http://www.w3.org/2004/02/skos/core#" xmlns:xsd="http://www.w3.org/2001/XMLSchema#" class="js"><head profile="http://www.w3.org/1999/xhtml/vocab">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Generator" content="Drupal 7 (http://drupal.org)">
<title>Portfolio Page | mywebsite.com</title>
<style type="text/css" media="all">#import url("http://url.com/modules/system/system.base.css?m178g6");
#import url("http://url.com/modules/system/system.menus.css?m178g6");
#import url("http://url.com/modules/system/system.messages.css?m178g6");
#import url("http://url.com/modules/system/system.theme.css?m178g6");</style>
<style type="text/css" media="all">#import url("http://url.com/misc/ui/jquery.ui.core.css?m178g6");
#import url("http://url.com/misc/ui/jquery.ui.theme.css?m178g6");
#import url("http://url.com/modules/overlay/overlay-parent.css?m178g6");</style>
<style type="text/css" media="all">#import url("http://url.com/modules/comment/comment.css?m178g6");
#import url("http://url.com/modules/field/theme/field.css?m178g6");
#import url("http://url.com/modules/node/node.css?m178g6");
#import url("http://url.com/modules/search/search.css?m178g6");
#import url("http://url.com/modules/user/user.css?m178g6");
#import url("http://url.com/sites/all/modules/views/css/views.css?m178g6");</style>
<style type="text/css" media="all">#import url("http://url.com/sites/all/modules/ctools/css/ctools.css?m178g6");
#import url("http://url.com/sites/all/modules/lightbox2/css/lightbox.css?m178g6");
#import url("http://url.com/sites/all/modules/views_slideshow/views_slideshow.css?m178g6");
#import url("http://url.com/modules/shortcut/shortcut.css?m178g6");
#import url("http://url.com/modules/toolbar/toolbar.css?m178g6");</style>
<style type="text/css" media="all">#import url("http://url.com/sites/all/themes/personal/css/style.css?m178g6");</style>
<style type="text/css" media="print">#import url("http://url.com/sites/all/themes/personal/css/print.css?m178g6");</style>
<style type="text/css" media="mobile">#import url("http://url.com/sites/all/themes/personal/css/mobile.css?m178g6");</style>
<script type="text/javascript" src="http://url.com/misc/jquery.js?v=1.4.4"></script>
<script type="text/javascript" src="http://url.com/misc/jquery.once.js?v=1.2"></script>
<script type="text/javascript" src="http://url.com/misc/drupal.js?m178g6"></script>
<script type="text/javascript" src="http://url.com/misc/ui/jquery.ui.core.min.js?v=1.8.7"></script>
<script type="text/javascript" src="http://url.com/sites/all/modules/views/js/views-contextual.js?m178g6"></script>
<script type="text/javascript" src="http://url.com/misc/jquery.ba-bbq.js?v=1.2.1"></script>
<script type="text/javascript" src="http://url.com/modules/overlay/overlay-parent.js?v=1.0"></script>
<script type="text/javascript" src="http://url.com/misc/jquery.cookie.js?v=1.0"></script>
<script type="text/javascript" src="http://url.com/sites/all/modules/lightbox2/js/lightbox.js?1332273397"></script>
<script type="text/javascript" src="http://url.com/sites/all/modules/views_slideshow/js/views_slideshow.js?m178g6"></script>
<script type="text/javascript" src="http://url.com/modules/toolbar/toolbar.js?m178g6"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
jQuery.extend(Drupal.settings, {"basePath":"\/","pathPrefix":"","ajaxPageState":{"theme":"personal","theme_token":"0CkOwyp1neNP-2IbE8LYCgYGBJ9sz39ORy5DodizAGg","js":{"misc\/jquery.js":1,"misc\/jquery.once.js":1,"misc\/drupal.js":1,"misc\/ui\/jquery.ui.core.min.js":1,"sites\/all\/modules\/views\/js\/views-contextual.js":1,"misc\/jquery.ba-bbq.js":1,"modules\/overlay\/overlay-parent.js":1,"misc\/jquery.cookie.js":1,"sites\/all\/modules\/lightbox2\/js\/lightbox.js":1,"sites\/all\/modules\/views_slideshow\/js\/views_slideshow.js":1,"modules\/toolbar\/toolbar.js":1},"css":{"modules\/system\/system.base.css":1,"modules\/system\/system.menus.css":1,"modules\/system\/system.messages.css":1,"modules\/system\/system.theme.css":1,"misc\/ui\/jquery.ui.core.css":1,"misc\/ui\/jquery.ui.theme.css":1,"modules\/overlay\/overlay-parent.css":1,"modules\/comment\/comment.css":1,"modules\/field\/theme\/field.css":1,"modules\/node\/node.css":1,"modules\/search\/search.css":1,"modules\/user\/user.css":1,"sites\/all\/modules\/views\/css\/views.css":1,"sites\/all\/modules\/ctools\/css\/ctools.css":1,"sites\/all\/modules\/lightbox2\/css\/lightbox.css":1,"sites\/all\/modules\/views_slideshow\/views_slideshow.css":1,"modules\/shortcut\/shortcut.css":1,"modules\/toolbar\/toolbar.css":1,"sites\/all\/themes\/personal\/css\/style.css":1,"sites\/all\/themes\/personal\/css\/print.css":1,"sites\/all\/themes\/personal\/css\/mobile.css":1}},"lightbox2":{"rtl":0,"file_path":"\/(\\w\\w\/)public:\/","default_image":"\/sites\/all\/modules\/lightbox2\/images\/brokenimage.jpg","border_size":10,"font_color":"000","box_color":"fff","top_position":"","overlay_opacity":"0.8","overlay_color":"000","disable_close_click":true,"resize_sequence":0,"resize_speed":400,"fade_in_speed":400,"slide_down_speed":600,"use_alt_layout":false,"disable_resize":false,"disable_zoom":false,"force_show_nav":false,"show_caption":true,"loop_items":false,"node_link_text":"View Image Details","node_link_target":false,"image_count":"Image !current of !total","video_count":"Video !current of !total","page_count":"Page !current of !total","lite_press_x_close":"press \u003Ca href=\u0022#\u0022 onclick=\u0022hideLightbox(); return FALSE;\u0022\u003E\u003Ckbd\u003Ex\u003C\/kbd\u003E\u003C\/a\u003E to close","download_link_text":"Download Original","enable_login":false,"enable_contact":false,"keys_close":"c x 27","keys_previous":"p 37","keys_next":"n 39","keys_zoom":"z","keys_play_pause":"32","display_image_size":"","image_node_sizes":"()","trigger_lightbox_classes":"","trigger_lightbox_group_classes":"","trigger_slideshow_classes":"","trigger_lightframe_classes":"","trigger_lightframe_group_classes":"","custom_class_handler":0,"custom_trigger_classes":"","disable_for_gallery_lists":true,"disable_for_acidfree_gallery_lists":true,"enable_acidfree_videos":true,"slideshow_interval":5000,"slideshow_automatic_start":true,"slideshow_automatic_exit":true,"show_play_pause":true,"pause_on_next_click":false,"pause_on_previous_click":true,"loop_slides":false,"iframe_width":600,"iframe_height":400,"iframe_border":1,"enable_video":false},"overlay":{"paths":{"admin":"node\/*\/edit\nnode\/*\/delete\nnode\/*\/revisions\nnode\/*\/revisions\/*\/revert\nnode\/*\/revisions\/*\/delete\nnode\/add\nnode\/add\/*\noverlay\/dismiss-message\nuser\/*\/shortcuts\nadmin\nadmin\/*\nbatch\ntaxonomy\/term\/*\/edit\nuser\/*\/cancel\nuser\/*\/edit\nuser\/*\/edit\/*","non_admin":"admin\/structure\/block\/demo\/*\nadmin\/reports\/status\/php"},"ajaxCallback":"overlay-ajax"},"tableHeaderOffset":"Drupal.toolbar.height"});
//--><!]]>
</script>
</head>
<body class="html not-front logged-in no-sidebars page-portfolio toolbar toolbar-drawer lightbox-processed" style="padding-top: 65px; ">
<div id="skip-link">
Skip to main content
</div>
<div id="overlay-disable-message" class="clearfix"><h3 class="element-invisible">Options for the administrative overlay</h3>If you have problems accessing administrative pages on this site, disable the overlay on your profile page. Dismiss this message.</div><div id="toolbar" class="toolbar overlay-displace-top clearfix toolbar-processed">
<div class="toolbar-menu clearfix">
<ul id="toolbar-home"><li class="home first last"><span class="home-link">Home</span></li>
</ul> <ul id="toolbar-user"><li class="account first">Hello <strong>user</strong></li>
<li class="logout last">Log out</li>
</ul> <h2 class="element-invisible">Administrative toolbar</h2><ul id="toolbar-menu"><li class="menu-11 path-admin-dashboard first"><span class="icon"></span>Dashboard <span class="element-invisible">(View and customize your dashboard.)</span></li>
<li class="menu-9 path-admin-content"><span class="icon"></span>Content <span class="element-invisible">(Administer content and comments.)</span></li>
<li class="menu-21 path-admin-structure"><span class="icon"></span>Structure <span class="element-invisible">(Administer blocks, content types, menus, etc.)</span></li>
<li class="menu-7 path-admin-appearance"><span class="icon"></span>Appearance <span class="element-invisible">(Select and configure your themes.)</span></li>
<li class="menu-18 path-admin-people"><span class="icon"></span>People <span class="element-invisible">(Manage user accounts, roles, and permissions.)</span></li>
<li class="menu-16 path-admin-modules"><span class="icon"></span>Modules <span class="element-invisible">(Extend site functionality.)</span></li>
<li class="menu-8 path-admin-config"><span class="icon"></span>Configuration <span class="element-invisible">(Administer settings.)</span></li>
<li class="menu-19 path-admin-reports"><span class="icon"></span>Reports <span class="element-invisible">(View reports, updates, and errors.)</span></li>
<li class="menu-12 path-admin-help last"><span class="icon"></span>Help <span class="element-invisible">(Reference for usage, configuration, and modules.)</span></li>
</ul> Hide shortcuts </div>
<div class="toolbar-drawer clearfix">
<div class="toolbar-shortcuts"><ul class="menu"><li class="first leaf">Add content</li>
<li class="leaf">Find content</li>
<li class="leaf">Performance</li>
<li class="last leaf">Maintenance mode</li>
</ul></div>Edit shortcuts </div>
</div>
<!-- If front page, present front page content -->
<div id="a">
<!-- Begin other page specific content -->
<div id="smallhead">
</div>
</div><!-- End div a-->
<!-- Begin menu -->
<div id="b">
<div id="menu">
<div class="item">Home</div>
<div class="item">About Me</div>
<div class="item">Portfolio</div>
<div class="item">Photos</div>
<div class="item">Projects</div>
<div class="item">Blog</div>
</div>
</div>
<div id="c">
<div id="middle">
<!-- Begin other page specific content -->
<div id="contentwrapper">
<div class="region region-content">
<div id="block-system-main" class="block block-system">
<div class="content">
<div class="view view-portfolio-page view-id-portfolio_page view-display-id-page view-dom-id-a0c892fe2818834f0a7750c98e7e6688">
<div class="view-content">
<div class="views-row views-row-1 views-row-odd views-row-first">
<div> <div><a href="/node/10">
<div class="smallbox">
<div class="nounderline">
<strong>Postcards</strong><br>
<img typeof="foaf:Image" src="" width="233" height="157" alt=""><br>
Postcards<br>
Adobe Illustrator
</div>
</div></a></div> </div> </div>
<div class="views-row views-row-2 views-row-even">
<div> <div><a href="/node/9">
<div class="smallbox">
<div class="nounderline">
<strong>Design</strong><br>
<img typeof="foaf:Image" src="" width="233" height="157" alt=""><br>
Desiugn<br>
Adobe Illustrator
</div>
</div></a></div> </div> </div>
<div class="views-row views-row-3 views-row-odd">
<div> <div><a href="/node/8">
<div class="smallbox">
<div class="nounderline">
<strong>Website</strong><br>
<img typeof="foaf:Image" src="" width="233" height="157" alt="screenshot"><br>
Awareness Campaign<br>
HTML, CSS
</div>
</div></a></div> </div> </div>
<div class="views-row views-row-4 views-row-even views-row-last">
<div> <div><a href="/node/7">
<div class="smallbox">
<div class="nounderline">
<strong>Website</strong><br>
<img typeof="foaf:Image" src="" width="233" height="157" alt=""><br>
Details Website<br>
HTML 5, CSS 3
</div>
</div></a></div> </div> </div>
</div>
</div> </div>
</div>
</div>
</div>
<!-- End other page specific content -->
</div><!--end middle-->
</div>
<div id="d">
<div id="footer">
;Contact Form
<br>
Copyright ©2012 My Name
</div>
</div>
<div id="lightbox2-overlay" style="display: none; "></div> <div id="lightbox" style="display: none;" class="lightbox2-orig-layout"> <div id="outerImageContainer" style="background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); "><div id="modalContainer" style="display: none; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; "></div><div id="frameContainer" style="display: none; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; "></div><div id="imageContainer" style="display: none; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; "><img id="lightboxImage" alt=""><div id="hoverNav"><a id="prevLink" title="Previous" href="#" style="padding-top: 10px; "></a><a id="nextLink" title="Next" href="#" style="padding-top: 10px; "></a></div></div><div id="loading"></div></div> <div id="imageDataContainer" class="clearfix" style="background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); "> <div id="imageData"><div id="imageDetails"><span id="caption"></span><span id="numberDisplay"></span></div><div id="bottomNav"><div id="frameHoverNav"><a id="framePrevLink" title="Previous" href="#" style="padding-top: 10px; "></a><a id="frameNextLink" title="Next" href="#" style="padding-top: 10px; "></a></div><a id="bottomNavClose" title="Close" href="#" style="background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); "></a><a id="bottomNavZoom" href="#"></a><a id="bottomNavZoomOut" href="#"></a><a id="lightshowPause" title="Pause Slideshow" href="#" style="display: none;"></a><a id="lightshowPlay" title="Play Slideshow" href="#" style="display: none;"></a></div></div> </div> </div></body></html>
And my CSS is as follows:
#charset "utf-8";
/* CSS Document */
body{
background: black;
font-size: 14px;
margin: 0;
}
a:visited{
color: blue;
}
h2{
font-size: 135%;
margin: .2em 0;
}
#a{
width: 100%;
background: rgb(140,79,84);
}
#bighead{
height: 31em;
width: 69em;
margin: 0 auto;
padding-top: 2em;
background: url(../img/headerpic.jpg);
text-align: center;
border: 0 solid black;
border-width: 0 4px;
}
#header a{
font-size: 35px;
text-decoration: none;
color: black;
}
#slogan{
font-size: 18px;
padding: .5em;
}
#smallhead{
height: 14em;
width: 69em;
margin: 0 auto;
background: url(../img/smallheader.jpg);
text-align: center;
border: 0 solid black;
border-width: 0 4px;
}
#b{
width: 100%;
background: rgb(50,51,46);
}
#menu{
width: 69em;
height: 2.5em;
border: 0 solid black;
border-width: 0 4px;
background: black;
text-align: center;
margin: 0 auto;
}
.item{
font-size: 17.5px;
height: 1.1em;
width: 9.2em;
float: left;
padding: .3em 0;
border-top: .2em solid rgb(31,38,28);
border-bottom: .2em solid rgb(31,38,28);
}
#menu a:link, a:visited{
text-decoration: none;
color: #CCC;
}
#menu a:hover{
color: white;
background: white;
text-decoration: underline;
}
#c{
width: 100%;
background: rgb(139,124,108);
}
#middle{
min-height: 22.5em;
width: 67.6em;
margin: 0 auto;
border: 0 solid black;
border-width: 0 4px;
background: rgb(98,103,109);
padding: .75em;
text-decoration: none;
}
.title{
font-size: 2em;
height: .5em;
width: 24em;
padding-left: 1em;
padding-bottom: .25em;
color: white;
}
.box{
float: left;
height: 17em;
width: 17em;
padding: 1em;
padding-top: .5em;
margin: 1.5em;
background: rgb(49,49,51);
color: white;
}
#contentwrapper{
}
#d{
width: 100%;
background: black;
}
#footer{
height: 2.5em;
width: 69em;
margin: 0 auto;
background: black;
text-align: center;
color: white;
}
.smallbox{
float: left;
height: 15em;
width: 17em;
padding: 1em;
padding-top: .5em;
margin: 1.5em;
background: rgb(49,49,51);
color: white;
text-align: center;
text-decoration: none;
}
.smallbox img{
padding: .2em 0;
}
.nounderline{
text-decoration: none;
}
Since this was the first google result and didn't solve my issue: Check the anchor states, as it might need to be set in one of the others. (https://www.w3schools.com/css/css_pseudo_classes.asp)
a,
a:link,
a:visited,
a:hover,
a:active{
text-decoration: none;
}
To apply just to this view add:
.view-portfolio-page .views-row a { text-decoration: none; }
To apply to all views add:
.views-row a { text-decoration: none; }
http://jsfiddle.net/D8kRE/
You were applying text-decoration: none to a div which has no effect. You can only apply that to an anchor tag which in your case is located at .views-row a. You can get more specific and apply this to only the portfolio page view by using the code I've put above.
If you are refering to the underline on the text, remember to set the text-decoration property to none on the ELEMENT. E.g.
<html>
<head></head>
<body>
<div>
Google
</div>
</body>
Edit: Note, it is bad to use styling in-line with elements, I used it, just to demonstrate a solution.
Instead of font-decoration: none; try the css text-decoration: none;
As this hasn't actually got a definitive answer yet and it's fairly high up on Google searches. I thought I would chip in with my answer.
I just had a similar problem where I couldn't pinpoint why I wasn't able to get rid of the underline and found out that it was because I didn't specify the hover state.
So try out
#header a:hover {
text-decoration: none;
}
And that should work. I know this was posted ages ago, but I have seen that you haven't accepted an answer and didn't post whether you sorted it or not. So hopefully my input will help someone along the way and hopefully you can see this and finally accept an answer or make your own.
I know this is old, but this came upon my search as well. So I thought I'd share.
I had a similar problem. I created a regular nav and setting the text-decoration to none worked fine.
Then I had to amend my css to create a hamburger menu effect for smaller viewports. And although I used the exact same css, the underline appeared and nothing I did would make it go away. I know it has something to do with the toggle:checked & ~.mainNav feature under which my nav needed to be placed, but I couldn't figure out why and how to get around it.
In any case, the one thing that DID work was going into my reset, and adding a default: a {text-decoration: none}
Don't know why it worked, but it did. Hope this helps someone.
I ran into this problem and found it was "box-shadow." See if you are lucky enough with these styles:
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
This doesn't appear to be a text-decoration: issue. It actually appears to be an issue with border-bottom:
Please check the instance of border-bottom in:
.item{
font-size: 17.5px;
height: 1.1em;
width: 9.2em;
float: left;
padding: .3em 0;
border-top: .2em solid rgb(31,38,28);
border-bottom: .2em solid rgb(31,38,28);
}
try to add !important
text-decoration: none !important;
text-decoration works on anchor, it's correct name would be: anchor-decoration-for-text.