I'd like to have the caption text stay the same width as the image (without setting one fixed width). I've tried playing around with , etc., but that's even harder to control.
Here's a sample of the CSS. Hope this is the proper way to ask questions here!
<head>
<style type="text/css">
<!--
#floatrightphoto {
float:right;
padding: 6px;
margin-left: 2px;
margin-top: 3px;
margin-bottom: 2px;
margin-right: 0px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #CCEE77;
border-right-color: #AFE165;
border-bottom-color: #AFE165;
border-left-color: #CCEE77;
background-color: #CCFF99;
}
#floatrightphoto p{
font-weight: normal;
color: #889260;
float: left;
margin-bottom: -3px;
margin-top: 0px;
margin-right: 1px;
margin-left: 0px;
text-align: right;
font-family: "Comic Sans MS", Ariel;
font-style: oblique;
font-size: 14px;
line-height: 16px;
position: static;
display: inherit;
}
body {
width: 750px;
}
-->
</style>
</head>
<body>
<div id="floatrightphoto">
<img src="somephoto" width="180" height="180">
<br>
<p>Caption Caption Caption Caption Caption Caption Caption
Caption Caption</p>
</br>
</img>
</div>
</body>
Whoa that's a whole lotta extra fluff. I'm looking for the same solution.
I came across this solution (modified to reflect what you are wanting):
#img-right{display: table; min-width: 1px; float:right; margin-left: 10px;}
#img-right p {display: table-caption; caption-side: bottom;}
However, this works in most all browsers except IE where in IE my #img-right spans the full width of the caption (the caption being longer than the image itself and it doesn't wrap). I am still trying to figure out how to make IE behave, as it works perfectly in other browsers.
As for your other code, I suggest simplifying it a bit to reduce load time. I modified your CSS a little bit...I'd suggest renaming the ID's to be smaller and easier to read, please, don't EVER use Comic Sans... ever. :)
body { width: 750px; }
#img-right {
float:right;
padding: 6px;
margin: 3px 2px 2px 0px;
border-top: 1px solid #ccee77;
border-left: 1px solid #ccee77;
border-bottom: 1px solid #afe165;
border-right: 1px solid #afe165;
background: #ccff99;
}
#img-right p{
font: italic 14px/16px Helvetica, Arial, Lucida Sans, Verdana;
color: #889260;
float: left;
margin: 0px 0px -3px 1px;
text-align: right;
}
Related
I have created a site that has a dynamically built menu, which draws out tabs, according to some arrays in the backend. Selecting a tab fetches the whole page again, with different css classes applied, depending on the selected tab.
Basically, I am using style="position: absolute; left: xxxxpx" where the xxxx is calucated in the backend.
I want to change the site so that the gui is more independent of the backend.
I am unsure how to proceed with changing this so that all the layout calculations are made by css. I was thinking about doing it with css variables, and keeping the essential same code, but I am unsure how to determine which node and therefore how far it should be offset.
My Current Code
1st tab selected
<div class="topTabSelected tab-admin noprint" style="left: 204px;">Administration</div>
<div class="topTab tab-design noprint" style="left: 336px;"> Design ManagerProject Manager</div>
<div class="topTab tab-project noprint" style="left: 468px;">Project Manager</div>
3rd tab selected
<div class="topTab tab-admin noprint" style="left: 204px;">Administration</div>
<div class="topTab tab-design noprint" style="left: 336px;"> Design ManagerProject Manager</div>
<div class="topTabSelected tab-project noprint" style="left: 468px;">Project Manager</div>
CSS
.tab-admin{
background-color: var(--admin-tab-bg);
}
.tab-design{
background-color: var(--design-tab-bg);
}
.tab-project{
background-color: var(--project-tab-bg);
}
.topTabSelected {
position: absolute;
top: 31px;
z-index: 8;
color: white;
font-weight: bold;
border-left: 1px solid black;
border-top: 1px solid black;
border-right: 1px solid black;
border-bottom: transparent;
padding: 3px;
border-radius: 5px 5px 0 0;
width: 120px;
height: 17px;
text-align: center;
}
.topTab {
position: absolute;
top: 31px;
z-index: 2;
color: white;
font-weight: bold;
border-left: 1px solid black;
border-top: 1px solid black;
border-right: 1px solid black;
padding: 3px;
border-radius: 5px 5px 0 0;
width: 120px;
text-align: center;
}
.topTab a {
text-decoration: none;
color: white;
}
.topTab a:hover {
text-decoration: underline;
color: white;
}
Backend code to calculate positions:
$tabwidth = 132;
$widthmodifier = 200;
for ($mainpageCounter = 1; $mainpageCounter <= count($mainpage); $mainpageCounter++) {
$topTabDivStart = "\n<div class=\"topTab " . ($p == $mainpageCounter ? "topTab-Selected " : "") . $mainpage[$mainpageCounter]["cssClass"] . " noprint\" style=\"left: " . $widthmodifier . "px;\">";
$topTabDivEnd = "</div>\n";
if ($p == $mainpageCounter) {
echo $topTabDivStart . $mainpage[$mainpageCounter]["title"] . $topTabDivEnd;
} else {
echo $topTabDivStart . "" . $mainpage[$mainpageCounter]["title"] . " $topTabDivEnd";
}
$widthmodifier += $tabwidth;
}
I'm having problems with my code. I have a fixed menu bar that works as it should but it doesn't resize when I change the size of the window. I need it to resize because if you change the window size, it will will not scroll horizontally and some buttons are cut off. How can I fix this?
Also feel free to make optimization or input on unnecessary code
Thanks
body {
margin: 0px;
padding: 0px;
background: url(images/gradient.jpg) no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center;
}
section {
margin: 0 auto;
border: 1px solid #000000;
border-radius: 8px;
background:#E5E7E9;
width: 958px;
height: 800px;
}
.bpic {
width: 200px;
height: 350px;
margin: 0px;
}
.biopic {
border: 2px solid #ddd;
border-radius: 8px;
padding: 5px;
width: 200px;
height: 350px;
margin: 40px 40px 40px 375px;
}
.bio {
margin: 40px;
font-family: verdana;
text-align: center;
}
#biography {
font-family: arial black;
font-size: 120%;
text-align: center;
border: 2px solid #ddd;
border-radius: 8px;
padding: 10px;
}
#assignments {
font-family: arial black;
font-size: 120%;
text-align: center;
border: 2px solid #ddd;
border-radius: 8px;
padding: 10px;
}
#projects {
font-family: arial black;
font-size: 120%;
text-align: center;
border: 2px solid #ddd;
border-radius: 8px;
padding: 10px;
}
#contact {
font-family: arial black;
font-size: 100%;
text-align: center;
border: 2px solid #ddd;
border-radius: 8px;
padding: 10px;
}
.email {
border: 1px solid #ddd;
border-radius: 8px;
padding: 5px;
width: 150px;
height: 96px;
margin: 3px 40px 3px 400px;
}
.banner {
width: 960px;
height: 143px;
margin: 0 auto;
padding: 0px;
background: url(images/banner.png) no-repeat;
}
.banner h2 {
font-family: vollkorn;
font-size: 350%;
color: white;
text-transform: uppercase;
margin: 0;
position: relative;
top: -40%;
left: 83%;
transform: translate(-50%, -50%);
}
.menu {
list-style-type: none;
margin: auto;
background-color: #333;
width: 100%;
background: url(images/menu.jpg) repeat-x;
position: fixed;
min-width: 1080px;
z-index: 1;
display: inline-block;
}
.menu ul {
float: left;
margin: 0px;
padding: 0 0 0 30%;
list-style: none;
}
.menu ul li {
padding: 0px;
display: inline;
}
.menu ul li a {
position: relative;
float: center;
display: inline-block;
height: 30px;
width: 180px;
text-align: center;
padding: 12px 0 0 0;
font-size: 13px;
font-weight: bold;
text-decoration: none;
color: #ffffff;
outline: none;
min-height: 24px;
}
.menu li a:hover, .menu li .current {
position: relative;
color: #ffffff;
background: url(images/menuhoverright.jpg) top right no-repeat;
}
.menu li a:hover span, .menu li .current span {
position: absolute;
display: inline-block;
width: 15px;
height: 42px;
top: 0;
left: 0;
background: url(images/menuhoverleft.jpg) no-repeat;
}
.jprop {
border: 1px solid #ddd;
border-radius: 8px;
padding: 5px;
width: 200px;
height: 195px;
margin: 40px;
}
.jprop:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
<!DOCTYPE html>
<html>
<head>
<!-- Homepage
My Biography Page
Author:
Date: 01/29/2017
-->
<meta charset="UTF-8" />
<title>Homepage</title>
<script src="modernizr-1.5.js"></script>
<link href="homestyles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="menu">
<img src="images/menu.jpg" alt="menu" />
<ul>
<li><span></span>Biography</li>
<li><span></span>Assignments</li>
<li><span></span>Projects</li>
<li><span></span>Contact</li>
</ul>
</div>
<div class="banner">
<img src="images/banner.png" alt="banner" />
<h2>K V</h2>
</div>
<section>
<div id="biography">
<a name="biography"><h1>Biography</h1>
</div>
<div class="biopic">
<img src="images/biopic.jpg" width="230" height="490" alt="biopic" class="bpic"/>
</div>
<article>
<div class="bio">
<p>Hello, my name is &&&&&&. --
</p>
<p>I am currently pursuing my A.S. degree in computer information technology at?I plan to start
working in the field of IT, once I obtained my A.S. degree and certifications. While working, I plan on
continuing my education to obtain my bachelor’s degree in IT at UCF. I have always had a passion for
technology, especially computers. To be able to work in the field that I enjoy is one of my life goal.
</p>
</div>
</article>
</section>
<br>
<section>
<div id="assignments">
<a name="assignments"><h1>Assignments</h1>
</div>
<div class="jprop">
<a href="Jprop/basic.html">
<img src="images/jprop.JPG" alt="jprops">
</a>
</div>
</section>
<br>
<section>
<div id="projects">
<a name="projects"><h1>Projects</h1>
</div>
</section>
<br>
<section style="max-height: 210px;">
<div id="contact">
<a name="contact"><h1>Contact</h1>
</div>
<div class="email">
<a href="mailto:REDACTED">
<img src="images/email.png" alt="emails">
</a>
</div>
</section>
<br>
</body>
</html>
This bit of css from your style sheet is going to keep the menu from resizing below 1080px. So it will be too wide for many tablets and phones for example.
.menu {
min-width: 1080px;
}
Remove the min-width property, and see if that fixes it for you.
On (my site) I would like to place the menubar in the center of the page.
Here the code of my menubar:
#navigation {
padding-bottom: auto;
width: 960px;
margin: auto;
text-align: center;
text-transform: uppercase;
overflow: hidden;
font-family: 'Raleway', sans-serif;
font-size: 13px;
background-color: #DDDDDD;
border: 0px solid;
border-radius: 15px;
color: #000000;
display: inline-block;
}
Thanks in advance for helping me! :)
Add width: 100%; to your #navigation for a full-wdith centered menu.
Or change the display to block for a centered menu without a full-width background.
If you want to keep the yellow line under, add a 1px bottom margin. This will shift the rest one pixel lower and it will reveal a yellow line.
margin-bottom: 1px
Working JSFiddle for this: http://jsfiddle.net/qwnwkp7u/2/
Switch display: inline-block; to display: block;
I guess you need to understand something about block and inline-block elements.
Block elements , if sized and smaller than page/container can basicly; be centered with margin:auto;.
Inline-block element behaves like text and can follow text-align value.
To center your menu , you have then 2 options:
margin:auto; with a block formating, you need then just to remove your inline-block display wich does:
#navigation {
padding-bottom: auto;
width: 960px;
margin: auto;
text-align: center;
text-transform: uppercase;
overflow: hidden;
font-family: 'Raleway', sans-serif;
font-size: 13px;
background-color: #DDDDDD;
border: 0px solid;
border-radius: 15px;
color: #000000;
}
or
text-align:center; from its parent if as an inline boxe. Wich would be here :
.bg-wrapper {
text-align:center;
}
If inline-block was here used to trigger some special layout , like to hold floatting elements, you could here turn display:block into display:table;.
doei
I am having problems with the z-index. I am trying to get the button link to display overtop of the image, but it just isn't seeming to work. The image below shows how I am wanting it to look.
Here is the HTML:
<div class="featured">
<img src="images/featured.png" alt="Featured Image">
<div class="button-2">
Buy Now
</div>
</div>
Here is the CSS:
.featured img
{
float: left;
z-index: -1;
}
.button-2
{
-moz-box-shadow:inset 0px 1px 0px 0px #940c00;
-webkit-box-shadow:inset 0px 1px 0px 0px #940c00;
box-shadow:inset 0px 1px 0px 0px #940c00;
background-color:#8b0101;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:0px;
display:inline-block;
color:#ffffff;
font-family:Arial;
font-size:15px;
font-weight:bold;
font-style:normal;
height:43px;
line-height:43px;
width:135px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #810e05;
float: left;
}
.button-2 a
{
color: #fff;
font-size: 20px;
letter-spacing: 2px;
}
.button-2:hover
{
background-color:#6c0301;
}
.button-2:active
{
position:relative;
top: 1px;
}
This is what is displaying: http://imgur.com/XungDOU
This is what I want it to do: http://imgur.com/XHXTKae
Try this:
.button-2{
position: absolute;
left:50%;
top:50%;
z-index:99}
In Chrome, the website bmr1.com shows the search widget with a magnifying glass as the submit buttons background image. In order to get the submit button to move I added Float:Right and Margin-top, to get it into the correct position. I also had to add position:relative, so that the button would be positioned on top of the text box. Issue is the same margin-top: of 31px that fixes Chrome, makes IE9's submit button way too high and out of place.
bmr1.com
<div id="search-2" class="widget widget_search"><h4 class="widgettitle"><cufon class="cufon cufon-canvas" alt="Search" style="width: 64px; height: 22px; "><canvas width="80" height="28" style="width: 80px; height: 28px; top: -4px; left: -1px; "></canvas><cufontext>Search</cufontext></cufon></h4><form role="search" method="get" id="searchform" action="http://bmr1.com/">
<label class="screen-reader-text" for="s">Search for:</label>
<input type="text" value="" name="s" id="s" placeholder="" widdit="on" autocomplete="off">
<input type="submit" id="searchsubmit" value="">
</form><div id="predictad_div" class="predictad"></div></div>
#sidebar1 { position: relative; }
#search-2.widget.widget_search {z-index:0; background-color: #363636; margin-right:15px; margin-bottom:25px; padding: 10px 10px 10px 10px; color:#363636; max-width:231px;}
#search-2.widget.widget_search #s{width:94%; padding: 5px;position:relative;}
#search-2.widget.widget_search h4 {font-size:140%; background-color: #84c4e7; padding: 5px 10px 5px 10px; border: 1px solid #fff; margin-bottom:10px;}
.widget_search .screen-reader-text {margin-bottom:-20px;float:right;}
#mp_cart_widget-3.widget.mp_cart_widget { background-color: #cdcdcd; margin-right:15px; margin-bottom:25px; padding: 10px 10px 10px 10px; max-width:231px;}
#mp_cart_widget-3.widget.mp_cart_widget h4 { font-size:140%; background-image:url('http://technickconsulting.com/testblog/wp-content/themes/BoatMotorRecyclers/images/greysliver.png'); background-repeat: repeat-x; padding: 5px 10px 6px 10px; margin-bottom:10px; color:#fff; }
#mp_categories_widget-3.widget.mp_categories_widget { background-color: #363636; margin-right:15px; margin-bottom:20px; padding: 10px 10px 10px 10px; color:#fff; max-width:231px;}
#mp_categories_widget-3.widget.mp_categories_widget h4 { font-size:140%; background-color: #84c4e7; padding: 5px 0px 5px 10px; border: 1px solid #fff; margin-bottom:10px; color:#363636;}
#mp_categories_widget-3.widget.mp_categories_widget a {text-decoration:none; color:#fff; margin-left: 30px; }
#sidebar ul {font-size:18px; font-weight:bold; }
ul#mp_category_list {padding-right:10px;font-size:18px; }
ul#mp_category_list .children {text-align:left;list-style: none;margin-left:10px; font-size:15px !important;}
.widget_search #searchsubmit {
background-image:url('http://technickconsulting.com/testblog/wp-content/themes/BoatMotorRecyclers/images/magglass.png');
background-color:transparent;
border:none;
background-repeat:no-repeat;
color:transparent;
height: 28px;
width:30px;
cursor: pointer;
float:right;
padding: 8px 16px;
margin-top:-31px;
position:relative;
}
Try this:
.widget_search #searchsubmit {
background-image: url('http://technickconsulting.com/testblog/wp-content/themes/BoatMotorRecyclers/images/magglass.png');
background-color: transparent;
border: none;
background-repeat: no-repeat;
height: 28px;
width: 30px;
cursor: pointer;
position: absolute;
z-index: 10;
top: 3px;
right: 0;
}
#search-2 form {position: relative;}
Also, I highly recommend to use a css reset! This will make every slight difference in lay-out between browsers go away. You will need to overwrite some of these values, but it saves you a lot of frustration in the long run!
An example: http://meyerweb.com/eric/tools/css/reset/
I agree with the previous commenter, use a reset.css! Different browsers has different default margin, padding etc values for everything and it makes your webpage look different in each of them.
To fix the problem you should do the followings.
First, give a fixed height for your text input field:
#search-2.widget.widget_search #s{width:94%;height:20px; padding: 5px;position:relative;}
Change is that I have applied a 20 pixel height for the element
Then apply the following to the submit button:
.widget_search #searchsubmit {
background-image:url('http://technickconsulting.com/testblog/wp-content/themes/BoatMotorRecyclers/images/magglass.png');
background-color:transparent;
border:none;
background-repeat:no-repeat;
color:transparent;
height: 28px;
width:30px;
cursor: pointer;
float:right;
bottom:31px;
position:relative;
}
You should use shortcodes like background: url('http://technickconsulting.com/testblog/wp-content/themes/BoatMotorRecyclers/images/magglass.png') no-repeat; to make your code shorter and cleaner
I hope this will fix your issue.