I've started my new feminist blog. Sadly, the logo does not look good at all. I've tried to remove the shadow, but it doesn't helped at all. Here is how it looks like (up) and how I want it to look like (down):
Both logos
But I don't know how to do it. Here is the HTML code of my blog: view-source:https://glenn-gleich.blogspot.de/. This is what I have tried. I think I have to change following:
<!-- Begin header content -->
<div class='header-content'>
<!-- Begin Main Logo -->
<div class='main-logo'>
<div class='header section' id='header'><div class='widget Header' data-version='1' id='Header1'>
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
Glenn
</h1>
</div>
<div class='descriptionwrapper'>
<p class='description'><span>
</span></p>
</div>
</div>
</div></div>
</div><!-- /.main-logo -->
<!-- End Main Logo -->
I think it should be substituted with something like this:
<div class='item-thumbnail'>
<img alt='' border='0' height='72' src='https://3.bp.blogspot.com/address_to_image/name.jpg' width='72'/>
</a>
</div>
I hope you can help me.
<h1 class='title' style="color: #000">
<span style="background: #000; color: #fff; padding-left: 5px; padding-right: 5px; margin-right: 2px;">G</span>lenn
</h1>
This would give the desired result, you can change it a little to your preferences.
Note: Do not use styles! I did it to make it easier to read, but you should put it in a .css file.
Related
I am learning HTML and CSS and I found one weird thing, despite training that I watch, and copy this step by step(using Visual Studio Code) I am unable to apply any style to any part of HTML file, when I add a Class to it. However, if I add ID, style applies.
My setting:
Visual Studio Code
Separate CSS and HTML File.
Example of not working code:
<div Class="Author">
<h1> About the Author</h1>
<img src="image link here">
</div>
however, if I change above code to this:
<div ID="Author">
<h1> About the Author</h1>
<img src="image link here">
</div>
This does work.
Yes, I do change properly the CSS file to be either "." or "#" is there anything I miss here?
I don't think this works:
<div Class="Author">
it should be lowercase:
<div class="Author">
and then in the css reference it like
.Author {color: red}
This functions correctly. You didn't give us css to work from so this is the best I can offer.
#Author {
color: red;
}
.Author {
color: blue;
}
<!-- no css applied -->
<div ID="no_css">
<h1> About the Author</h1>
<img src="image link here">
</div>
<!-- css applied to `ID` using `#` -->
<div ID="Author">
<h1> About the Author</h1>
<img src="image link here">
</div>
<!-- css applied to `Class` using `.` -->
<div Class="Author">
<h1> About the Author</h1>
<img src="image link here">
</div>
Title says all basically. I want the text right next to the slideshow.
<div class="displayBorder">
<div class="displayContainer">
<div class="pictureContainer">
<div class="photoContainer">
<div class="switchPhoto" id="switchLeft-wexford" onclick="lastPhoto('wexford-1')"><</div>
<img src="css/img/wexford-1.jpg" id="wexford-image" />
<div class="switchPhoto" id="switchRight-wexford" onclick="nextPhoto('wexford-1')">></div>
</div>
</div>
<h2 id="wexford">17 My Street - Some Town, New York</h2>
<h3>$1,249,999</h3>
</div>
</div>
H tags have a specific purpose, to act as a header under which other content will fall. To use h tags side by side goes against their intended use (and is invalid html). The span tag does what an H tag does, but is an inline element (display:inline), where a H tag is a block level element (and acts like a div)(display:block). You can change the 'display' property of an H tag's css to do what a span does.
With that in mind, I would actually use 'display:inline-block' in your situation.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
h1 {
display: inline-block;
}
h2.asCouple {
display: inline-block;
margin-left: 15px;
}
</style>
</head>
<body>
<div>
<h1>Topic - <h2 class="asCouple">Subtopic</h2></h1>
</div>
</body>
</html>
Hope this helps.
You can do it inline when declaring the HTML element, I did something like this:
<h6 style="display: inline">Posted by <h4 style="display: inline">{{.}}</h4></h6>
By doing this, you don't change the style of all <hSOMETHING> elements
<div class="displayBorder">
<div class="displayContainer">
<div class="displayTable">
<div class="pictureContainer">
<div class="photoContainer">
<div class="switchPhoto" id="switchLeft-wexford" onclick="lastPhoto('wexford-1')"><</div>
<img src="css/img/wexford-1.jpg" id="wexford-image" />
<div class="switchPhoto" id="switchRight-wexford" onclick="nextPhoto('wexford-1')">></div>
</div>
</div>
<div class="txt-con">
<h2 id="wexford">Location</h2> <br />
<h3>$1,249,999</h3>
<p>Custom Built Home With Every Bell And Whistle !/ Ch Colonial With 6 Generous Bdrms, 2 Master Suites Or Use Lge Area For Office, 5 Full Baths, Wood Floors Thru-Out, Granite Eik W/ Center Isle, Top Appliances, Andersen Windows, Lots Of Details, Full Finished Basement W/ Ose, Full Wet Bar, Theater Tv Area, Playrm, Lots Of Storage, Custom Freeform Salt Pool, Custom Pool House</p>
</div>
</div>
<button class="learn-btn">LEARN MORE</button>
</div>
#Jared Scarito is this what you need??
CSS
.displayContainer{
display:table;
}
.photoContainer,.txt-con{
display:table-cell;
vertical-align:middle;
}
HTML
<div class="displayBorder">
<div class="displayContainer">
<div class="pictureContainer">
<div class="photoContainer">
<div class="switchPhoto" id="switchLeft-wexford" onclick="lastPhoto('wexford-1')">
<</div> <img src="https://i.stack.imgur.com/rhy46.png" id="wexford-image" />
<div class="switchPhoto" id="switchRight-wexford" onclick="nextPhoto('wexford-1')">></div>
</div>
</div>
<div class="txt-con">
<h2 id="wexford">1234 My Street - Sometown, New York</h2>
<h3>$1,249,999</h3>
</div>
</div>
</div>
changed the image to demonstrate
Pretty much the same HTML, added extra div around h3 and h2..
I wanna know why the logo is not showing on mobile devices, I tried resetting my network on phone, and reset web browser.I also try making the logo little smaller from 100px to 80px but still it's not showing. Here is the code below. Please Help Thanks is advance. Here is the working jsfiddle https://jsfiddle.net/light22/60xrbkhf/#&togetherjs=fHfHVyawIa
<header id="header" class="transparent-header" data-sticky-class="not-dark">
<div id="header-wrap" style="height:180px;">
<!-- Primary Navigation "
============================================= -->
<nav id="primary-menu" class="style-2 center">
<!--<div class="container clearfix"></div>-->
<div id="primary-menu-trigger"><i class="icon-reorder"></i></div>
<div style="text-align:center">
<ul class="one-page-menu" data-easing="easeInOutExpo" data-speed="1250" data-offset="65" >
<li><div style="border-bottom:1px solid #000">Home</div></li>
<li><div>WHO WE ARE</div></li>
<li><div>WHAT WE TRADE</div></li>
<li><div>SERVICES</div></li>
<li><div>LOGISTICS</div></li>
<li><div>CONTACT</div></li>
</ul>
</div>
</nav><!-- #primary-menu end -->
<!-- Logo
============================================= -->
<div id="logo" class="divcenter">
<img class="divcenter" src="images/logo.png" alt="Canvas Logo">
<img class="divcenter" src="images/logo#2x.png" alt="Canvas Logo">
</div><!-- #logo end -->
<br>
</div>
</header><!-- #header end -->
Rename image in your images folder
1logo#2x.png to logo#2x.png
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I'm currently working on a website. I've looked through similar questions but haven't found a solution for my predicament. The changes I'm applying to external and even inline CSS are always being ignored when it comes to height. I can change the width of the div freely, however.
What's going on? What am I missing?
<div id="mainsection" style="height: 100%; width: 100%; border: 5px solid red; display: block;">
<!-- Header
============================================= -->
<header id="header" class="transparent-header style-1 dark no-sticky">
<div id="header-wrap">
<div class="container clearfix">
<div id="primary-menu-trigger"><i class="icon-reorder"></i></div>
<!-- Logo
============================================= -->
<div id="logo">
<img src="images/logo.png" alt="Brasillis Idiomas Logo">
<img src="images/logo.png" alt="Brasillis Idiomas Logo">
</div><!-- #logo end -->
<!-- Primary Navigation
============================================= -->
<nav id="primary-menu" class="sub-title">
<ul >
<li><div>Home</div><span >Brasillis e você</span></li>
<li><div>Quem Somos</div><span >Desde 1992</span></li>
<li><div>Cursos</div><span >Idiomas e intérpretes</span></li>
<li><div>Serviços</div><span >Tradução e Transcrição</span></li>
<li><div>Contato</div><span >E informações</span></li>
</ul>
</nav><!-- #primary-menu end -->
</div>
</div>
</header><!-- #header end -->
<section id="page-title" class="page-title-parallax page-title-dark page-title-center" style="background-image: url('images/fotos/BrasillisOficialEscuro.jpg'); background-size: cover; background-position: top center;" data-stellar-background-ratio="0.8">
<div class="container clearfix">
<h1 style="font-size: 3em;">Seja bem vindo ao Brasillis</h1>
<span>Milhares de alunos formados e eventos bem-sucedidos desde 1992</span>
</div>
</section>
<div class="clearfix col_full">
<div class="col_full common-height">
<div class="col-md-4 dark col-padding ohidden" style="background-color: #32587E; box-shadow: 3px 3px 5px #ccc;">
<div>
<h3 class="uppercase" style="font-weight: 600;">NOSSOS CURSOS</h3>
<p style="line-height: 1.8;">Frontline respond, visionary collaborative cities advancement overcome injustice, UNHCR public-private partnerships cause. Giving, country educate rights-based approach; leverage disrupt solution.</p>
Saiba mais
</div>
<i class="icon-comments bgicon"></i>
</div>
<div class="col-md-4 col-padding ohidden" style="background-color: #F1F1F1; box-shadow: 3px 3px 5px #ccc;">
<div>
<h3 class="uppercase" style="font-weight: 600;">NOSSOS SERVIÇOS</h3>
<p style="line-height: 1.8;">Frontline respond, visionary collaborative cities advancement overcome injustice, UNHCR public-private partnerships cause. Giving, country educate rights-based approach; leverage disrupt solution.</p>
Saiba mais
</div>
<i class="icon-briefcase bgicon"></i>
</div>
<div class="col-md-4 dark col-padding ohidden" style="background-color: #339933; box-shadow: 3px 3px 5px #ccc;">
<div>
<h3 class="uppercase" style="font-weight: 600;">PORTAL DO ALUNO</h3>
<p style="line-height: 1.8;">Frontline respond, visionary collaborative cities advancement overcome injustice, UNHCR public-private partnerships cause. Giving, country educate rights-based approach; leverage disrupt solution.</p>
Em breve
</div>
<i class="icon-user bgicon"></i>
</div>
</div>
</div>
</div>
First: If you want no one to get your code, you cannot post your website online. Once you uploaded it, everyone can get your code.
So let me answer your question. Have you thought about what the 100% means?
If you put more input inside the container ,the complete height will change, actually the paramter height can be higher than your viewport height.
You want "100%" of viewport height, so use "100vh" instead of "100%" !
height: 100vh;
So far I can see is that you used height:100%. This doen't work, I'm not sure why not, but I have a solustion for you.
You can use height:100vh;
vh means: view height, so this means it will take the height of the screen that you are watching it on.
I am having trouble getting quotes (within divs) to line up properly.
This site is here
http://79.170.44.107/robinsonhambro.com/wp/.
What I need to do is line up the divs (with a class or id of hero) across a horizontal line along the top and the bottom of the picture. For some reason they dont seem to be sitting evenly.
Can anyone give me some help?
I assume the issue you are having is the quotes in the right hand side is a little lower than the other two DIVs.
One of the issues I saw was that there is an empty <p> in your right div. If you remove it, the text should line up with the rest of the DIVs. Remove this from your html: <p><!-- Right div hero section --></p>
Also, your .entry class has huge amount of padding in it,remove that and it should bring everything down closer.
I'd also recommend removing the other <p> tags and using margins for better control off the elements.
Here is my update to your html. This work from from browser.
Updated Style.CSS
.entry {
border-bottom-color:#F1F1F1;
border-bottom-style:solid;
border-bottom-width:1px;
padding:50px 50px 45px 0;
becomes....
.entry {
border-bottom-color:#F1F1F1;
border-bottom-style:solid;
border-bottom-width:1px;
padding:0 50px 45px 0;
Updated html
<div id="herobox">
<div id="left-hero">
<img src="http://79.170.44.107/robinsonhambro.com/wp/wp-content/uploads/2015/02/newdoor.jpg" width="265px" height="426px" alt="Robinson Hambro Door">
</div>
<div id="centre-hero">
<h1>
<p class="pcentre">Robinson Hambro specialises in Board Search and Chairman Advisory. The Firm advises companies with a global outlook drawing on the experience of a multilingual and multidisciplinary team.</p>
</h1>
<div class="subcentrehero">
<p class="p03">Robinson Hambro Chairman Advisory Service is priceless.Լ/p>
<p class="p04">- Carles Casajuana, former Spanish Ambassador to the UK</p>
</div>
<div class="subcentrehero">
<p class="p03">Robinson Hambro advice was invaluable and I could not recommend them more highly!</p>
<p class="p04">- Global COO of a $45bn firm</p>
</div>
</div>
<div id="right-hero">
<p class="p01">The process was carried out to a high standard, in a timely way, and I can therefore wholeheartedly recommend this service.</p>
<p class="p02">- Dr Andrew McCulloch, CEO, MHF</p>
<p class="p01">Karina knows everyone</p>
<p class="p02">Fiona Woolf, former Lord Mayor of the City of London</p>
<p class="p01">We would have no hesitation in highly recommending Robinson Hambro for an assignment in any sector.</p>
<p class="p02">- Robin Walker, Deputy Chairman, Berry Gardens</p>
</div>
</div>
<div style="clear:both"></div>
</article> <!-- end .entry -->
</div> <!-- end #main_content -->
</div> <!-- end #content_area -->
</div> <!-- end .container -->
</div> <!-- end #main-area -->
</div> <!-- end #page-wrap -->
<footer id="main-footer">
<div class="container clearfix">
<div id="footer-top-shadow"></div>
<div id="footer-widgets" class="clearfix">
<div class="footer-widget footer-col1"><div id="text-4" class="f_widget widget_text"><h4 class="widgettitle">INSIDER VIEW</h4> <div class="textwidget">Visit Karina's Column for insights on the world of finance by Robinson Hambro's Karina Robinson
</div>
</div></div> <!-- end . footer-widget --><div class="footer-widget footer-col2"><div id="text-5" class="f_widget widget_text"><h4 class="widgettitle">What We Do</h4> <div class="textwidget">Guiding Principles
<br/>
Chairman Counsel
<br/>
Board Search</div>
</div></div> <!-- end . footer-widget --><div class="footer-widget footer-col3"><div id="text-6" class="f_widget widget_text"><h4 class="widgettitle">Get in touch</h4> <div class="textwidget">t: +44 (0) 20 3405 2355
<br/>
m: +44 (0) 7980 510 975
<br/>
e: info#robinsonhambro.com
</div>
</div></div> <!-- end . footer-widget --><div class="footer-widget footer-col4 last"><div id="text-3" class="f_widget widget_text"><h4 class="widgettitle">LINKS</h4> <div class="textwidget"><img src="http://79.170.44.107/robinsonhambro.com/wp/wp-content/uploads/2014/12/women.gif">
<img src="http://79.170.44.107/robinsonhambro.com/wp/wp-content/uploads/2014/12/bankers.gif">
<img src="http://79.170.44.107/robinsonhambro.com/wp/wp-content/uploads/2014/12/youtube.png">
<img src="http://79.170.44.107/robinsonhambro.com/wp/wp-content/uploads/2014/12/googleplus.png"> </div>
</div></div> <!-- end . footer-widget --> </div> <!-- end #footer-widgets -->
<p id="copyright">Designed by Elegant Themes | Powered by WordPress</p>
</div> <!-- end .container -->
</footer> <!-- end #main-footer -->